问题：
微信小程序切换了筛选条件后，列表滚动条没有滚动回顶部。
场景：
wepy+原生
通过<scroll-view>实现列表滚动
方案：
1、通过wx:if设置列表元素的展示隐藏
通过给<scroll-view wx:if="{{flag}}"> 设置显示隐藏，去重新加载列表。直接设置无法生效，滚动条依旧保留在上次滚动的地方；加一个延迟，放在定时器里去setTimeout(() => { this.flag = true }, 100) 设置flag的值。目的是等到页面渲染完成后，再去重新加载。
2、通过scroll-top控制滚动
在重新加载数据的时候，给scroll-top设置0不好使，设置0.1可以生效。
代码：
list.wepy ------ 方案1
<template>
<view class="log-list">
// 通过wx:if控制元素重新渲染
<scroll-view wx:if="{{flag}}" scroll-y class="log-list__list" bindscrolltolower="loadMore">
<view class="log-list__box" wx:if="{{dataList.length > 0}}">
<view class="log-list__item" wx:for="{{dataList}}" >
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class LogList extends wepy.page {
pageTrackName = 'pages/main';
eventTrackType = 'main';
mixins = [appErrorMixin]
config = {
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: '日志记录',
navigationBarTextStyle: 'black'
};
data = {
dataList: [],
flag: true
}
methods = {
// 重新刷新列表，滚动条置顶
refreshSearch(info) {
this.flag = false
this.departmentId = info.departID
this.clientName = info.clientName
this.type = info.type
this.pageIndex = 1
this.dataList = []
// 设置flag的时候加个延迟
setTimeout(() => {
this.flag = true
this.$apply()
this.search()
}, 100)
},
async search() {
const self = this
this.setSubmitTime()
try {
let res = await httpHelper.get({
url: 'work/List',
showLoading: true,
data: {
departID: this.departmentId ? this.departmentId : '',
saleName: this.clientName,
startTime: this.startTime,
endTime: this.endTime,
pageIndex: this.pageIndex,
pageSize: '10'
}
})
let list = res.value.items || []
if (list.length < 10) {
this.isfooter = true
} else {
this.isfooter = false
}
let datatList = list.map((item) => {
return {
...item,
date: self.formatDate(item.workDate, 'MM月dd日')
}
})
this.dataList = [
...this.dataList,
...datatList
]
this.listObj = res.value || {}
this.loaded = true
this.$apply()
} catch (err) {
this.showApiError(err, '加载失败，请稍后重试。')
}
}
loadMore() {
if (this.isfooter) {
return false
}
this.pageIndex = this.pageIndex + 1
this.search()
}
}
}
</script>
<style lang="scss" scope>
.log-list {
padding-top: 84rpx;
color: #444;
position: relative;
z-index: 5;
width: 100%;
height: 100%;
&__list {
box-sizing: border-box;
width: 100%;
height: 100%;
}
__box {
padding: 40rpx 24rpx 0 28rpx;
position: relative;
z-index: 8;
overflow: hidden;
}
__item {
padding: 20rpx 0 60rpx 30rpx;
box-sizing: border-box;
position: relative;
margin-top: -40rpx;
width: 100%;
height: auto;
}
}
</style>
list.wpy ------ 方案2
<template>
<view class="log-list">
// 通过scrollTop控制滚动
<scroll-view scroll-y class="log-list__list" bindscrolltolower="loadMore" scroll-top="{{scrollTop}}">
<view class="log-list__box" wx:if="{{dataList.length > 0}}">
<view class="log-list__item" wx:for="{{dataList}}" >
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class LogList extends wepy.page {
pageTrackName = 'pages/main';
eventTrackType = 'main';
mixins = [appErrorMixin]
config = {
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: '日志记录',
navigationBarTextStyle: 'black'
};
data = {
dataList: [],
scrollTop: 0,
}
methods = {
// 重新刷新列表，滚动条置顶
refreshSearch(info) {
this.departmentId = info.departID
this.clientName = info.clientName
this.type = info.type
this.pageIndex = 1
this.dataList = []
// 只有首次设置0可以生效，后面需要设置0.1
if (this.scrollTop === 0) {
this.scrollTop = 0.1
} else {
this.scrollTop = 0
}
this.$apply()
this.search()
},
async search() {
const self = this
this.setSubmitTime()
try {
let res = await httpHelper.get({
url: 'work/List',
showLoading: true,
data: {
departID: this.departmentId ? this.departmentId : '',
saleName: this.clientName,
startTime: this.startTime,
endTime: this.endTime,
pageIndex: this.pageIndex,
pageSize: '10'
}
})
let list = res.value.items || []
if (list.length < 10) {
this.isfooter = true
} else {
this.isfooter = false
}
let datatList = list.map((item) => {
return {
...item,
date: self.formatDate(item.workDate, 'MM月dd日')
}
})
this.dataList = [
...this.dataList,
...datatList
]
this.listObj = res.value || {}
this.loaded = true
this.$apply()
} catch (err) {
this.showApiError(err, '加载失败，请稍后重试。')
}
}
loadMore() {
if (this.isfooter) {
return false
}
this.pageIndex = this.pageIndex + 1
this.search()
}
}
}
</script>
<style lang="scss" scope>
.log-list {
padding-top: 84rpx;
color: #444;
position: relative;
z-index: 5;
width: 100%;
height: 100%;
&__list {
box-sizing: border-box;
width: 100%;
height: 100%;
}
__box {
padding: 40rpx 24rpx 0 28rpx;
position: relative;
z-index: 8;
overflow: hidden;
}
__item {
padding: 20rpx 0 60rpx 30rpx;
box-sizing: border-box;
position: relative;
margin-top: -40rpx;
width: 100%;
height: auto;
}
}
</style>
