微信小程序上拉加载，即分页加载的实现

目前自己使用的分页加载方法，大体可供参考。

主要思想是通过触底时当前页数+1，发起新页请求，将返回的新页数据数组与之前的数据数组连接，渲染当前前页面。

js:

var util = require('../../utils/util.js')

Page({

  data: {
    announcementList: [],  //公告列表
    pagenum: 1, //当前页默认值为1
    total_pages: 1, //总页数默认为1
    isPullDown_tapALL: false, //下拉标志默认为false
    isReachBottom: false, //上拉标志默认为false ; true底部显示 -加载中-，即触底加载下一页
    power: "",   //用户权限
  },

  onLoad() {
    var that = this
    that.data.power = wx.getStorageSync('power')
    that.getNotices()
  },

  //下拉刷新，重新获取第一页数据
  onPullDownRefresh() {  
    var that = this
    that.setData({
      isPullDown_tapALL: true
    })
    that.data.pagenum = 1
    that.getNotices()
    wx.stopPullDownRefresh()
  },

  //后台获取公告列表  --调用函数
  async getNotices() {
    var that = this
    let res
    try {
      res = await util.request_getList("notices", that.data.pagenum)
      let arr1 = that.data.announcementList; //从data获取当前datalist数组
      let arr2 = util.check_visitable(res, that.data.power) //根据用户权限返回的数据
      if (that.data.isPullDown_tapALL) 
      {
        arr1 = arr2    //下拉刷新不操作，直接更新为最新数据
      } else {
        arr1 = arr1.concat(arr2)  //上拉刷新的话直接数组相接就行了
      }
      that.setData({
        announcementList: arr1,
        total_pages: res.data.pagination.total_pages
      })
    } catch (error) {
      console.log("fail", error)
    }

    if (that.data.isReachBottom) {
      that.setData({
        isReachBottom: false
      })
    }
    if (that.data.isPullDown_tapALL) {
      that.setData({
        isPullDown_tapALL: false
      })
    }
  },

  //上拉加载，即触底开始加载下一页
  onReachBottom: function () { 
    var that = this;
    var pagenum = that.data.pagenum + 1; //当前页数并+1
    if (pagenum <= that.data.total_pages) {
      that.setData({
        pagenum: pagenum,
        isReachBottom: true
      })
      that.getNotices(); //重新调用请求获取下一页数据
    }
  },

})

util.js:

const request_getList = (url_name, pageNum) => { //获取列表，   当然pageNum也可以自己整合成data传入
  return new Promise((resolve, reject) => {
    wx.showNavigationBarLoading()
    wx.request({
      url: getApp().globalData.url + url_name,
      data: {
        page: pageNum, //从数据里获取当前页数
      },
      method: "GET",
      header: {
        'content-type': "application/json; charset=utf-8",
        'token': wx.getStorageSync('token')
      },
      success(res) {
        console.log("列表后台返回", res)
        if (res.statusCode == 200) {
          resolve(res)
        } else {
          showModalErrorAndMsg("加载失败", res)
          reject(res)
        }
      },
      fail: function (error) {
        // 发生网络错误等情况触发
        console.log("请求失败")
        showModalTowErrors("加载失败")
        reject(error)
      },
      complete() {
        wx.hideNavigationBarLoading()
      }
    })
  })
}

module.exports = {
  request_getList,
}

搭配Lin UI的 Loadmore 组件，实现页底提示效果

wxml:

<l-loadmore show="{{true}}" type="{{isReachBottom||isPullDown_tapALL?'loading':'end'}}"  line="{{true}}" loading-text="努力加载中~"  end-text="到底了">
</l-loadmore>