小程序分页加载实现指南

什么是分页加载

分页加载是一种常见的数据加载策略，特别适用于移动端应用和小程序。它将大量数据分割成多个"页"，用户滚动到页面底部时自动加载下一页数据，而不是一次性加载所有内容。

小程序分页加载的优势

1. 提升性能​​：减少首次加载数据量，加快页面渲染速度
2. ​​节省流量​​：只加载用户实际浏览的内容
3. ​​优化体验​​：避免长时间等待所有数据加载完成

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [],
    page: 1,
    limit: 20,
    total: 0,
  },

  onShow() {
    this.setData({
      list: [],
      page: 1,
      limit: 20,
    })
    this.get()
  },
  get() {
    let that = this
    getApp().r('get', {
      page: that.data.page,
      t:'document_list'
    }, function (res) {
      if (res.code == 0) {
        that.setData({
          list: that.data.list.concat(res.data.data),
          total: res.data.total
        })
      }
    })
  },
  /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
  onPullDownRefresh: function () {
    console.log('页面相关事件处理函数--监听用户下拉动作')

    this.onShow()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('页面上拉触底事件的处理函数')
    if (this.data.list.length == this.data.total) {
      console.log('全部在这了')
      // wx.showToast({
      //   title: '全部在这了!',
      //   icon: 'none',
      //   duration: 2000
      // })
      return
    }
    this.setData({
      page: this.data.page + 1
    })
    this.get()
  },
})

index.json

{
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50
}