小程序上拉載入技巧分享，讓你的內容無限展示！

一、什麼是上拉載入？

隨著移動互聯網的快速發展，越來越多的應用開始採用上拉載入的方式，用戶在滾動屏幕的時候，當滾動到底部時，應用會自動載入更多數據。這種方式可以避免用戶翻頁，提供更好的用戶體驗，並且可以方便地展示海量數據。

在小程序中，天然支持上拉載入的組件為scroll-view，只需監聽scroll-view的onReachBottom事件即可。

二、如何實現上拉載入？

1. 在scroll-view中添加bindscrolltolower事件監聽。

<scroll-view scroll-y="true" lower-threshold="10" style="height: 100%;" bindscrolltolower="loadMore">
  ...
</scroll-view>

2. 在Page中實現事件處理句柄函數loadMore來觸發下一頁的數據載入，並且在成功返回數據後，將新的數據合併到原有的數據列表中。

Page({

  data: {
    items: [],
    page: 1
  },

  onLoad: function (options) {
    this.loadMore();
  },

  loadMore: function () {
    var self = this;
    
    wx.showLoading({
      title: '玩命載入中...',
    })

    wx.request({
      url: 'https://www.example.com/page=' + self.data.page,
      success: function (res) {
        if (res.data.length > 0) {
          var items = self.data.items.concat(res.data);
          self.setData({
            items: items,
            page: self.data.page + 1
          })
        } else {
          wx.showToast({
            title: '沒有更多了',
          })
        }
      },
      complete: function () {
        wx.hideLoading()
      }
    })
  }

})

三、如何優化上拉載入？

1. 節流函數優化scroll事件的觸發次數，以減少網路請求的次數。

function throttle(method, context) {
  clearTimeout(method.tid);
  method.tid = setTimeout(function () {
    method.call(context);
  }, 300);
}

2. 增加loading動畫提示，提高用戶體驗。

wx.showLoading({
  title: '玩命載入中...',
})

wx.hideLoading()

3. 在請求成功時判斷請求結果是否為空，若為空，則顯示「沒有更多了」提示信息。

if (res.data.length > 0) {
  var items = self.data.items.concat(res.data);
  self.setData({
    items: items,
    page: self.data.page + 1
  })
} else {
  wx.showToast({
    title: '沒有更多了',
  })
}

四、小結

上拉載入是一種提供更好用戶體驗的方式，通過使用scroll-view的onReachBottom事件來實現，優化方面可通過節流函數、增加loading動畫提示以及結果判斷等方式進行。在實際項目中，上拉載入已成為大部分應用的主流方式之一，希望本篇文章對您有所幫助。