前言
详细很多开发者在微信小程序开发的时候，遇到过这样的难题。云数据库只能读取20条记录，那项目在上线后，只读20条记录的功能是不现实的，那我们如何采取策略呢？分页。
思路
- 第一、当我们加载页面的时候，我们首先用count功能，进行判断，是否采取分页措施。我们按每页有20条记录为例。当我们的记录大于20的时候我们就采取分页，当记录小于20的时候我们不分页。
- 第二、继续按照分页的思路去想。1、假如用户在第一页，那么就会显示“下一页” 的图标，“上一页”的图标就会不显示。
2、假如用户在第二页或中间页，则“下一页”和上一页的图标就会显示。 - 3、假如用户在最后一页，那么就只显示“上一页”而不显示下一页，或当点击下一页的时候，则会提示“没有更多的数据”。
代码实现
tip:在这演示功能，不做，css样式
一、wxml页面
//循环数据列表，item为每一个数据
<view wx:for="{
{useinfo}}" wx:"index">{
{item}}</view>
//
<view>
//pageback:上一页触发事件 pagenext:下一页触发事件
//backFlag nextFlag是显示的上下页按钮的标志。优点：避免用户操作不当，造成未测试到的bug
// 0为不显示，1为显示，默认两个都不显示
<view bindtap="pageback" wx:if="{
{backFlag==0}}">上一页</view>
<view bindtap="pagenext" wx:if="{
{nextFlag==0}}">下一页</view>
</view>
二、js页面
const c1=wx.cloud.database()
Page({
data:{
userinfo:null
backFlag:0,
nextFlag:0,
start:0,//代表用户在操作上下页的时候的，所在的页数
pageMax:'',最大页数
},
onLoad(){
//读取数据库中的记录数
var that=this
var sum=c1.collection('cloud').count();
if(sum<=20){
//代表数据库内记录不满20条,则就没必要进行分页
this.setDate({
backFlag:0,
nextFlag:0,
})
}if(sum>20){
//进行分页操作，假如数据库内有125条数据，每页我们读取20，那我们就需要将其分成7页
var pageindex=Math.ceil(sum/20)
this.setDate({
backFlag:0,
nextFlag:1,//要进行分页操作，所以显示下一页
pageMax:pageindex
})
}
//无论我们分不分分页，在用户刚进入页面的时候必须先把第一个的数据直接读取数据
c1.collection('cloud').get({
success(res){
that.setDate({
userinfo:res.data
start:0,//当前页数默认为1页
})
}
})
},
//下页的触发事件
pagenext(){
var that=this
//定义下一页数的索引数
var index=parseInt(this.data.start)+1
if(index+1==that.data.pageMax){
//如果下一页等于最后一页则就不显示下一页按钮,只显示上一页
that.setData({
nextFlag:0,
backFlag:1,
start:index //start此时就要等于当前页数
})
}
c1.collection('test').skip(index*20).limit(20).get({
success(res){
that.setData({
userinfo:res.data,
start:index
})
}
})
//防止用户误触，在最后一页点击两次，所以我们做一层保护
if(index==pageMax){
that.onLoad({
success(){
wx.showToast({
title: 'error',
})
}
})
}
},
//下一页
pageback(){
var that=this
var index=parseInt(this.data.start)-1
if(index==0){
//如果上一页的页数等于第一页，则不应该显示上一页
this.setData({
backFlag:0,
nextFlag:1,
start:0
})
}
c1.collection('test').skip(index*20).limit(20).get({
success(res){
that.setData({
userinfo:res.data,
start:index
})
}
})
//防止用户误触，在第一页页点击两次，造成下标为负数，所以我们做一层保护
if(index<0){
that.onLoad({
success(){
wx.showToast({
title: 'error',
})
}
})
}
},
})
本人开发的小程序,大家可以去体验，有更多，知道的功能，大家在评论区留言。
