美文网首页
微信小程序 scroll-view组件多次触发bindscrol

微信小程序 scroll-view组件多次触发bindscrol

作者: _Waiting_ | 来源:发表于2020-09-18 14:47 被阅读0次

出现这个情况的原因是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.这个效果要在真机环境下测试,要是想在模拟器上测试,把上诉负数改为正数即可

相关文章

网友评论

      本文标题:微信小程序 scroll-view组件多次触发bindscrol

      本文链接:https://www.haomeiwen.com/subject/uwljyktx.html