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

发布时间：2023-05-19

一、什么是上拉加载？

随着移动互联网的快速发展，越来越多的应用开始采用上拉加载的方式，用户在滚动屏幕的时候，当滚动到底部时，应用会自动加载更多数据。这种方式可以避免用户翻页，提供更好的用户体验，并且可以方便地展示海量数据。 在小程序中，天然支持上拉加载的组件为 scroll-view，只需监听 scroll-view 的 onReachBottom 事件即可。

二、如何实现上拉加载？

  1. 在 scroll-view 中添加 bindscrolltolower 事件监听。
<scroll-view scroll-y="true" lower-threshold="10" style="height: 100%;" bindscrolltolower="loadMore">
  ...
</scroll-view>
  1. 在 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);
}
  1. 增加 loading 动画提示，提高用户体验。
wx.showLoading({
  title: '玩命加载中...',
})
wx.hideLoading()
  1. 在请求成功时判断请求结果是否为空，若为空，则显示“没有更多了”提示信息。
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 动画提示以及结果判断等方式进行。在实际项目中，上拉加载已成为大部分应用的主流方式之一，希望本篇文章对您有所帮助。

推荐文章