效果展示

需求分析

需求：通过 setData 数据过多会导致无法显示，所以需要分页显示。

实现思路：

1. 获取数据总数量
2. 定义每页显示数量
3. 计算出来总页数
4. 获取当前页数，进行显示

代码实现

初始化数据代码

/**
   * 页面的初始数据
   */
  data: {
    perNum: 10, // 每页多少条纪录数量
    totalCount: 0, // 总共的纪录条数
    maxPage: 0, // 最大页码
    page: 0, // 客户端请求的当前页码
  },
    onLoad: function (options) {
    
    let data = {
      atcId: options.actId
    }
    
    // 获取数量
  db.collection('apply').where(data).count().then(res => {
      this.data.totalCount = res.total
      // 得到总页数
      this.data.maxPage = Math.floor(this.data.totalCount / this.data.perNum);
      if (this.data.totalCount % this.data.perNum != 0) {
        this.data.maxPage += 1
      }
      console.log('this.data.maxPage', this.data.maxPage)
      this.setData({
        maxPage:this.data.maxPage
      })
    })
    }

页面逻辑代码

<view wx:if="{{maxPage>0}}" class="section">
			<text bindtap="onPageData" data-type="0" wx:if="{{page!=0}}" > 上一页 ｜</text>
			<text> {{page+1}}/{{maxPage}} </text>
			<text bindtap="onPageData" data-type="1" wx:if="{{page+1!=maxPage}}">｜ 下一页 </text>
		</view>

翻页逻辑代码

onPageData(res) {
    console.log(res.currentTarget.dataset.type)
    let page = this.data.page
    let perNum = this.data.perNum
    console.log('onReachBottom', page)
    wx.showLoading({
      title: '加载中...',
    })
    if (this.data.isReachBottom) {
      this.data.isReachBottom = false
      if(res.currentTarget.dataset.type=='1'){
        page += 1
      }else{
        page -= 1
      }
     
      wx.cloud.callFunction({
        // 要调用的云函数名称
        // name: 'getApply',
        name: 'getApplySik',
        data: {
          atcId: this.data.atcId,
          skip: page * perNum
        }
      }).then(res => {
        wx.hideLoading()
        this.data.isReachBottom = true
        console.log(this.data.applyList.length)
        this.setData({
          applyList: res.result.data,
          page:page
        })
      })
    }
  }
})

云函数getApplySik代码：

const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async(event, context) => {

  let data = {
    atcId: event.atcId
  }
  if (event.cuDate) {
    data.cuDate = event.cuDate
  }


  const apply = await db.collection('apply').where(data)
  .skip(event.skip)
  .limit(10).get()


  return apply
}

总结

重点主要是两个部分：

1. 前端js的数据逻辑控制
2. 云函数的 skip 和 limit 的运用
   • skip：官方文档传送门
   • limit：官方文档传送门

如有收获，记得点赞、收藏
如有疑问，欢迎进行留言讨论