微信小程序分页功能实现

先在data里定义当前页，每页条数，全部总条数 在wxml页面遍历cartListDatas

  data: {
    page: 0, //当前页
    pages: 10, //每页条数
    total: 0, //q全部总条数
    cartListDatas: [],

  },

请求接口数据

 // 获取数据
  getCartList(isMerge) {
    var deptId = wx.getStorageSync('deptId')
    var pages = this.data.pages
    var page = this.data.page
    config.reqestApi(app.globalData.api + `/cart/getCars?deptId=${deptId}&page=${page}&size=${pages}`).then(res => {
      console.log("cart=============", res)
      if (res.data.code == 200) {
        let cartListDatas = this.data.cartListDatas
        if (!isMerge) {
          //不合并,shop需要初始化
          cartListDatas = [];
        }
        cartListDatas = cartListDatas.concat(res.data.data.content) || [];
        this.setData({
          cartListDatas,
          total: res.data.data.totalElements,
        })
      }
    })
  },

设置分页

  //  分页
  setPage() {
    const {
      page,
      pages,
      total
    } = this.data;
    // const totalPages = getTotalPages(total, pages);
    const remainder = Number(total) % Number(pages);
    const value = Math.floor(total / pages);
    const totalPages = remainder == 0 ? value - 1 : Number(value);
    // return totalPages
    console.log("totalPages======", totalPages);
    if (totalPages > 0) {
      this.data.page += 1
    }
    if (page >= totalPages || this.isLoading) {
      //控制触底是否加载需要两个条件,满足一下两个条件,都不能调用请求函数
      // 1.当前页是最后一页,
      // 2. 正在加载中
      return
    }
    //分页加载需要传递isMerge=true参数,表示需要合并到原来的数组上
    this.getCartList(true)
  },

页面上拉事件处理函数

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