微信小程序上拉加載：onReachBottom詳解+設置觸發距離

前端常常遇到上拉加載更多的需求，通常還涉及到翻頁。小程序裏已經給了下拉到底的觸發方法onReachBottom(),這裏記錄下怎樣使用這個方法實現下拉加載更多，有須要的直接看代碼，有詳細註釋：

一、首先在data裏定義一下返回數據data,和翻頁的頁數pagenum

data: {
    datalist: [], //.wxml文件須要綁定的列表，我這裏用的數據類型是數組
    pagenum: 1, //初始頁默認值爲1
  },

二、具體的請求過程，包含新老數據的數組合並，實現數據實時更新

getdatalist: function () { //可在onLoad中設置爲進入頁面默認加載
   var that = this;
    wx.request({
      url: '請求地址',
      data: {
        "key": "某入參value",
        "pageNum": that.data.pagenum, //從數據裏獲取當前頁數
        "pageSize": 10, //每頁顯示條數
      },
      method: "POST",
      success: function (res) {
        var arr1 = that.data.datalist; //從data獲取當前datalist數組
        var arr2 = res.data; //今後次請求返回的數據中獲取新數組
        arr1 = arr1.concat(arr2); //合併數組
        that.setData({
          datalist: arr1 //合併後更新datalist
        })
      },
      fail: function (err) { },//請求失敗
      complete: function () { }//請求完成後執行的函數
    })
  }

三、翻頁時更新頁碼pagenum+1，並觸發新一輪請求，和第2部造成循環。

onReachBottom: function () { //觸底開始下一頁
    var that=this;
    var pagenum = that.data.pagenum + 1; //獲取當前頁數並+1
    that.setData({
      pagenum: pagenum, //更新當前頁數
    })
    that.getdatalist();//從新調用請求獲取下一頁數據
  },

四、若是想要實現無感加載，還能夠在.json文件中給onReachBottom()設定觸發距離，這樣不用拉到最底部就開始觸發onReachBottom翻頁：
"onReachBottomDistance":300 //能夠在當前頁也能夠全局設置