微信小程式 scroll-view 如何實作滾動下拉

在小程式開發過程中，經常會遇到清單滾動加載的效果。當整個頁面需要滾動下拉的時候，我們可以借助小程式的生命周期函數 onReachBottom。但是當需要滾動下拉的内容為頁面的一部分時，就需要用到 scroll-view 元件了。

在 scroll-view 中有一個函數 bindscrolltolower，會在滾動到底部/右邊時觸發。

實作原理：

設定一個請求發送的開關，當傳回的資料小于設定的每頁條數時，關閉請求。

具體實作方法如下：

wxml:

<scroll-view scroll-y="{{true}}" style="width:100%;margin-left:60rpx;height:600px;" bindscrolltolower="lower">
	這裡包括着你寫的代碼
</scroll-view>
           

JS:

data:{
	page:1,   // 第一頁
	list:[],  // 接受清單資料
	flag:true  // 防抖開關 防止使用者不停的下拉
}
// 滾動到底觸發的方法
lower(){
    if(this.data.flag){
      this.setData({
        flag:false
      })
      this.getData(); // 瘋狂的請求的方法
    }
  },
  getData(){
    wx.request({
      url: "你的伺服器請求位址",
      data:{
      		page:this.data.page,
      		limit:'10'   // 假設每頁10條資料 
        }
      method: 'get',
      success: (result) => {
        var list=this.data.list;
        var page=this.data.page+1;
        list=list.concat(result.data.list);// 拼接回來的資料
      
        this.setData({
            list:list,
            page:page,
        })
        // 當回來的資料小于十條得時候 不讓再請求了 否則繼續請求
        if(result.data.list.length<10){
          this.setData({
            flag:false
          })
        }else{
          this.setData({
            flag:true
          })
        }
      }
    });
  }