微信小程序云开发,用分页功能突破云数据库20条数据读取限制!(最完整版,复制既可用)

文章目录

  • 前言
  • 思路
  • 代码实现
  • 本人开发的小程序,大家可以去体验,有更多,知道的功能,大家在评论区留言。

前言

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

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

微信小程序云开发,用分页功能突破云数据库20条数据读取限制!(最完整版,复制既可用)_第1张图片

你可能感兴趣的:(微信小程序开发,微信小程序,数据库,javascript)