调试基础库版本:3.7.7
skyline模式下 scroll-view 下拉刷新时和刷新完成后都会触发bindscrolltolower事件,并且在scroll-view内无item时,上拉操作也会触发bindscrolltolower触底事件,导致列表界面同时带有下拉刷新和上拉加载功能会出现问题
代码如下:
js:
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onRefresh() {
console.log("------------------下拉刷新--------------------")
if (this.data.loading) {
this.setData({
refreshTrigger: false,
})
return
}
setTimeout(() => {
var num = this.data.dataList.length + 1
this.data.dataList.push(num)
this.setData({
refreshTrigger: false,
dataList: this.data.dataList
})
}, 1500);
},
//上拉加载
onLoadMore() {
if (this.data.loading || this.data.refreshTrigger) {
return
}
console.log("------------------加载更多--------------------")
this.data.loading = true
wx.showLoading({
title: '加载中...',
})
setTimeout(() => {
wx.stopPullDownRefresh()
wx.hideLoading()
this.data.loading = false
var num = this.data.dataList.length + 1
this.data.dataList.push(num)
this.setData({
dataList: this.data.dataList
})
}, 1500);
},
wxss:
.scrollarea {
flex: 1;
overflow-y: hidden;
background-color: yellow;
}
.item-conteiner {
width: 100%;
height: 86rpx;
text-align: center;
background-color: white;
}
wxml:
<scroll-view class="scrollarea" scroll-y="true" refresher-enabled="true" refresher-threshold="{{100}}" refresher-triggered="{{refreshTrigger}}" bindrefresherrefresh="onRefresh" bindscrolltolower="onLoadMore"
refresher-background="#EDEDED" lower-threshold="1px">
<block wx:for="{{dataList}}" wx:key="*this">
<view class="item-conteiner">{{item}}</view>
</block>
</scroll-view>
bindscrolltolower 本来也会重复触发,需要自己业务上加个 loading 来阻止请求期间重复触发