云开发-实现分页功能
效果展示
需求分析
需求:通过 setData 数据过多会导致无法显示,所以需要分页显示。
实现思路:
- 获取数据总数量
- 定义每页显示数量
- 计算出来总页数
- 获取当前页数,进行显示
代码实现
初始化数据代码
/**
* 页面的初始数据
*/
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
}
总结
重点主要是两个部分:
- 前端js的数据逻辑控制
- 云函数的 skip 和 limit 的运用
* skip:<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.skip.html" rel="noopener" target="_blank">官方文档传送门</a>
* limit:<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.limit.html" rel="noopener" target="_blank">官方文档传送门</a>
如有收获,记得点赞、收藏
如有疑问,欢迎进行留言讨论