微信小程序 scroll-view组件多次触发bindscrol
2020-09-18 本文已影响0人
_Waiting_
出现这个情况的原因是scroll-view组件有个upper-threshold/lower-threshold属性(默认50),当你下/上拉加载的时候除非你碰到顶/底部不然你在0~50这个区间内滑动的话会一直触发bindscrolltoupper/bindscrolltolower事件。
解决方法就是设置一个开关,当开关为false时直接return。触发bindscrolltoupper/bindscrolltolower事件时把开关设置为false,而且只有开关为true时才会继续执行下面的操作,然后将开关设置为true。
代码如下:
wxml
<scroll-view class="sc" style="height:400px;width:100%; background-color: skyblue;"
scroll-y="true"
bindscrolltoupper="upper" bindscrolltolower="lower"
enhanced = 'true' binddragend="ragend" binddragging="ragging"
upper-threshold = '-50' lower-threshold = '-50'
>
<view style="height:200px;width:100%; background-color: red;">
this a view
</view>
<view style="height:200px;width:100%; background-color: yellow;">
this a view
</view>
<view style="height:200px;width:100%; background-color: blue;">
this a view
</view>
</scroll-view>
js
/**
* 页面的初始数据
*/
data: {
isUpper:false,
isLower:false,
},
upper:function(e){
if(this.data.isUpper == true){
return
}
console.log('下拉')
this.data.isUpper = true
this.myTimer1()
},
lower:function(e){
if(this.data.isLower == true){
return
}
console.log('上拉')
this.data.isLower = true
this.myTimer2()
},
ragend:function(e){
console.log('滑动结束')
console.log(e)
},
ragging:function(e){
// console.log('滑动事件')
// console.log(e)
},
/*模拟刷新*/
myTimer1:function(){
setTimeout(() => {
this.data.isUpper = false;
}, 2000);
},
/*模拟加载*/
myTimer2:function(){
setTimeout(() => {
this.data.isLower = false;
}, 2000);
},
几点说明
1.为什么upper-threshold = '-50' lower-threshold = '-50' 设置为负数,这个是为也更好的用户体验。
2.亲测binddragend="ragend"不调用,基础库版本2.0.4
3.这个效果要在真机环境下测试,要是想在模拟器上测试,把上诉负数改为正数即可