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

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

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

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

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

  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 () { }//請求完成后執行的函數
    })
  }

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

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

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