微信小程序 scroll-view組件多次觸發(fā)bindscrolltoupper/scrolltolower事件

出現(xiàn)這個情況的原因是scroll-view組件有個upper-threshold/lower-threshold屬性（默認50）提岔，當你下/上拉加載的時候除非你碰到頂/底部不然你在0~50這個區(qū)間內滑動的話會一直觸發(fā)bindscrolltoupper/bindscrolltolower事件夯巷。
解決方法就是設置一個開關喷兼，當開關為false時直接return。觸發(fā)bindscrolltoupper/bindscrolltolower事件時把開關設置為false走孽，而且只有開關為true時才會繼續(xù)執(zhí)行下面的操作念逞，然后將開關設置為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>

 /**
   * 頁面的初始數(shù)據(jù)
   */
  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' 設置為負數(shù)，這個是為也更好的用戶體驗。
2.親測binddragend="ragend"不調用，基礎庫版本2.0.4
3.這個效果要在真機環(huán)境下測試，要是想在模擬器上測試，把上訴負數(shù)改為正數(shù)即可

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者