微信小程序云开发分页刷新获取数据

2023-09-07 阅读 18 评论 0

摘要：利用云函数调用数据库，在云函数中分页调取数据。再在js中不断将新的数据拼接到旧数据中，在前端显示。初始只显示5条记录，下拉刷新即可获取更多。首先在JS中，调用云函数，获取到后端的数据： /*** 从数据库获取数据*/getData(num=

利用云函数调用数据库，在云函数中分页调取数据。再在js中不断将新的数据拼接到旧数据中，在前端显示。初始只显示5条记录，下拉刷新即可获取更多。
在这里插入图片描述
首先在JS中，调用云函数，获取到后端的数据：

/*** 从数据库获取数据*/getData(num=5,page=0){wx.cloud.callFunction({name:"dairyGetlist",  //云函数名data:{num:num,    //用来记录每次获取数据的数量page:page,  //每次从page条数据之后获取数据}}).then(res=>{//将新数据拼接到旧数据var oldData=this.data.dairyObjvar dr=res.result.data//将时间戳写成固定格式dr.forEach(item=>{var d=new Date(item.time)var year=d.getFullYear()var month=d.getMonth()+1var day=d.getDate()item.time=year+"/"+month+"/"+day//文本内容中的换行和空格要进行相应的转换，才能保证输出的正确性item.content=item.content.split('&hc').join('\n')})var newData=oldData.concat(res.result.data)this.setData({dairyObj:newData})})},

然后来到云函数中，对数据库进行操作：

exports.main = async (event, context) => {
//获取参数 var num=event.num;var page=event.page;const { OPENID } = cloud.getWXContext()return await db.collection("diarylist").where({_openid:OPENID}).orderBy('time','desc').skip(page).limit(num).get({success:function(res){console.log(res.data)}})
}

数据库返回数据后，每次触底刷新触发云函数的调用：

/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {wx.showLoading({title: '正在加载...',mask:true})//dairyObj是存放日记的数组var page=this.data.dairyObj.lengththis.getData(5,page)this.changeup()wx.hideLoading()},