直击小程序实战痛点！《小程序实战（三）——分页加载》教你玩转小程序

前端

2023-09-10 21:44:18

小程序实战（三）——分页加载

大家好，我是来自帝都的一名前端程序猿，很高兴与大家分享我对小程序实战的心得。今天，我们要来聊聊《小程序实战（三）——分页加载》。

分页加载，是小程序开发中经常会遇到的场景。比如，当我们需要展示大量数据时，我们可以使用分页加载来分批加载数据，从而避免页面卡顿。

在小程序中，我们可以使用 onReachBottom 函数来实现分页加载。当用户滚动到页面底部时，onReachBottom 函数就会被触发，此时我们就可以加载下一页数据。

使用 onReachBottom 函数实现分页加载，需要以下几个步骤：

在小程序的 JSON 配置文件中，配置 onReachBottom 函数。
在小程序的页面文件中，实现 onReachBottom 函数。
在 onReachBottom 函数中，发送请求加载下一页数据。
将加载的下一页数据添加到当前页面数据中。
刷新页面，展示新的数据。

下面，我们来看一个具体的例子。假设我们有一个小程序页面，用于展示商品列表。我们希望在用户滚动到页面底部时，加载下一页商品数据。

首先，我们在小程序的 JSON 配置文件中，配置 onReachBottom 函数：

{
  "pages": [
    {
      "path": "pages/index/index",
      "onReachBottom": "loadMoreData"
    }
  ]
}

然后，我们在小程序的页面文件中，实现 loadMoreData 函数：

loadMoreData() {
  wx.showLoading({
    title: '加载中',
  })

  wx.request({
    url: 'https://example.com/api/products',
    data: {
      page: this.data.page + 1
    },
    success: (res) => {
      this.setData({
        page: this.data.page + 1,
        products: this.data.products.concat(res.data.products)
      })

      wx.hideLoading()
    }
  })
}