微信小程序云开发分页刷新获取数据实例教程与代码分享

2025-01-22
来源:网络整理

本文实例与大家分享微信小程序云端开发中页面刷新和获取数据的具体代码,供大家参考。具体内容为:使用云函数调用数据库,并在云函数中的页面中检索数据。然后继续在js中将新数据拼接成旧数据并显示在前端。最初仅显示 5 项...

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

使用云函数调用数据库,在云函数中按页检索数据。然后不断地将新数据拼接成旧数据并显示在前端。最初仅显示 5 条记录。下拉刷新即可获得更多。

首先在JS中调用云函数获取后端数据:

/** php* 从数据库获取数据 */ 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 //将时php间戳写成固定格式 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 }) }) },

然后来到云函数,操作数据库:

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.datphpa) } android}) }

数据库返回数据后,每次底部刷新都会触发对云函数的调用:

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

以上就是本文的全部内容。希望对大家的学习有所帮助,也希望大家支持我们。

本文标题:微信小程序云开发实现分页刷新获取数据

分享