评论

云开发-实现分页功能

通过分页解决 setData 过多不显示的问题

效果展示

需求分析

需求:通过 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 的运用

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

最后一次编辑于  08-14  
点赞 1
收藏
评论

1 个评论

  • wang li
    wang li
    08-16

    和上拉加载哪个好一些

    08-16
    赞同
    回复 1
    • 陈宇明
      陈宇明
      08-16
      上拉的原理是list追加内容,数据达到一定量也出现显示不出来的情况。
      08-16
      回复
登录 后发表内容