小程序分页模板实现分页加载的详细指南

小程序分页模板

import { xxx} from "../../../service/xxx"
Page({
  data: {
    query: {
      pageNum: 1,
      pageSize: 10,
      loadAll: false
    },
    pageData: []
  },

 
  onLoad: function (options) {
    this._init()
  },

  async _init(cb, query = {}) {
   this.setData({'query.pageNum': 1,'query.loadAll': false, pageData: []}) 
   await this.getPageData()
   cb && cb()
  },

  handleGoView(e) {
    const { id, status } = e.currentTarget.dataset
    if (status * 1 === 1) {
      tt.navigateTo({
        url: "?=" + id
      })
    }
  },
  
  async getPageData() {
    const { query, pageData } = this.data
    if (query.loadAll) return
    const res = await xxx(query)

    if (res.code * 1 === 1) {
       const pageNum = query.pageNum + 1
       const resData = res.data.list
       this.setData({
          pageData: pageData.concat(resData),
         'query.pageNum': pageNum,
         'query.loadAll': pageNum > res.data.totalPage * 1 ? true : false
       }) 
    }
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this._init(() => {
      tt.stopPullDownRefresh()
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getMyWeeklyReport()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})