前言

详细很多开发者在微信小程序开发的时候，遇到过这样的难题。云数据库只能读取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',
          })
        }
      })
    }
  },
})

本人开发的小程序,大家可以去体验，有更多，知道的功能，大家在评论区留言。