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

网友投稿 405 2023-11-12

本文实例为大家分享了微信小程序云开发分页刷新获取数据的具体代码，供大家参考，具体内容如下

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

利用云函数调用数据库，在云函数中分页调取数据。再在js中不断将新的数据拼接到旧数据中，在前端显示。初始只显示5条记录，下拉刷新即可获取更多。

首先在JS中，调用云函数，获取到后端的数据：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
* 从数据库获取数据
*/
getData(num=5,page=0){
wx.cloud.callFunction({
name:"dairyGetlist",  //云函数名
data:{
num:num,    //用来记录每次获取数据的数量
page:page,  //每次从page条数据之后获取数据
}
}).then(res=>{
//将新数据拼接到旧数据
var oldData=this.data.dairyObj
var dr=res.result.data
//将时间戳写成固定格式
dr.forEach(item=>{
var d=new Date(item.time)
var year=d.getFullYear()
var month=d.getMonth()+1
var 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
})
})
},

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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)
}
})
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也

您可能感兴趣的文章:微信小程序开发之实现食堂点餐系统微信小程序开发之实现记账本微信小程序开发之实现心情记事本微信小程序组件化开发的实战步骤微信小程序开发WXML模板语法基础教程微信小程序开发中组件的生命周期详细介绍微信小程序开发之实现一个跑步小程序微信小程序开发中所碰到问题集锦

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 数据 微信小程序 小程序 js
上一篇:小程序云开发教程如何使用云函数实现点赞功能
下一篇:券商架构解析
相关文章

 发表评论

暂时没有评论，来抢沙发吧~