onReachBottom詳解+設(shè)置觸發(fā)距離

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

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

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

2、具體的請求過程，包含新老數(shù)據(jù)的數(shù)組合并，實現(xiàn)數(shù)據(jù)實時更新

getdatalist: function () { //可在onLoad中設(shè)置為進入頁面默認加載
   var that = this;
    wx.request({
      url: '請求地址',
      data: {
        "key": "某入?yún)alue",
        "pageNum": that.data.pagenum, //從數(shù)據(jù)里獲取當(dāng)前頁數(shù)
        "pageSize": 10, //每頁顯示條數(shù)
      },
      method: "POST",
      success: function (res) {
        var arr1 = that.data.datalist; //從data獲取當(dāng)前datalist數(shù)組
        var arr2 = res.data; //從此次請求返回的數(shù)據(jù)中獲取新數(shù)組
        arr1 = arr1.concat(arr2); //合并數(shù)組
        that.setData({
          datalist: arr1 //合并后更新datalist
        })
      },
      fail: function (err) { },//請求失敗
      complete: function () { }//請求完成后執(zhí)行的函數(shù)
    })
  }

3、翻頁時更新頁碼pagenum+1，并觸發(fā)新一輪請求，和第2部形成循環(huán)。

 onReachBottom: function () { //觸底開始下一頁
    var that=this;
    var pagenum = that.data.pagenum + 1; //獲取當(dāng)前頁數(shù)并+1
    that.setData({
      pagenum: pagenum, //更新當(dāng)前頁數(shù)
    })
    that.getdatalist();//重新調(diào)用請求獲取下一頁數(shù)據(jù)
  },

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

問題一

小程序 Page自定義：onReachBottom 函數(shù)不執(zhí)行

今天開發(fā)小程序的時候，遇到了這么一堆坑，百度了好久沒有原因。

最終找到了原因是因為如果你的頁面沒有充滿屏幕是不會觸發(fā)這個函數(shù)的！

所以最好的辦法就是把最外層的view的height屬性設(shè)置為100%！

成功解決！