问题:
微信小程序切换了筛选条件后,列表滚动条没有滚动回顶部。
场景:
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.