微信小程序 scroll-view组件多次触发bindscrolltoupper/scrolltolower事件

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容