小程序上拉加载技巧分享，让你的内容无限展示！

一、什么是上拉加载？

随着移动互联网的快速发展，越来越多的应用开始采用上拉加载的方式，用户在滚动屏幕的时候，当滚动到底部时，应用会自动加载更多数据。这种方式可以避免用户翻页，提供更好的用户体验，并且可以方便地展示海量数据。

在小程序中，天然支持上拉加载的组件为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动画提示以及结果判断等方式进行。在实际项目中，上拉加载已成为大部分应用的主流方式之一，希望本篇文章对您有所帮助。