問題:
WeChat アプレットがフィルター基準を切り替えた後、リストのスクロール バーが一番上までスクロールしません。
シナリオ:リストスクロールの実装による
wepy+native<scroll-view>
解決策:
1. wx:if を通じてリスト要素の表示と非表示を設定し、の表示と非表示を設定し
て<scroll-view wx:if="{
{flag}}">リストをリロードします。直接設定を有効にすることはできず、スクロール バーは最後にスクロールした場所に残ります。遅延を追加し、タイマーに設定してsetTimeout(() => { this.flag = true }, 100)フラグの値を設定します。その目的は、ページのレンダリングが完了するまで待ってから再読み込みすることです。
2. スクロールトップによるスクロールの制御
データをリロードする場合、scroll-top0 を設定すると無効になりますが、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>