网站建设推广途径,wordpress短信验证插件,怎么禁用wordpress谷歌字体,上海建筑工程有限公司现在是一次性加载所有的记录数据#xff0c;数据多的时候#xff0c;会加载比较慢#xff0c;所以我们改成分页加载#xff0c;一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据#xff0c;知道所有的数据加载完成1、添加data变量编辑record.vue文件#xff0c…现在是一次性加载所有的记录数据数据多的时候会加载比较慢所以我们改成分页加载一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据知道所有的数据加载完成1、添加data变量编辑record.vue文件添加两个变量page和morepage默认为0表示当前的页数more默认为true用来控制底部显示的信息data () {return {show_record:false,userinfo:{},records:[],page: 0,more: true}
},
2、添加底部页面代码!-- 参考代码无需粘贴
RecordList :keyindex v-for(record,index) in records :record record/RecordList --!-- 需要添加的部分 --
!-- 如果more为false底部显示「没有更多数据」 --
p classtext-footer v-if!more没有更多数据
/p
!-- 如果records数据一共不到15条底部什么也不用显示 --
p classtext-footer v-else-ifrecords.length 15
/p
!-- 如果more为true并且总记录大于15条底部显示加载中 --
p classtext-footer v-else加载中···
/p3、编辑getRecords方法根据下面的提示编辑方法async getRecords () {//调用后台数据时显示「加载中」提示框wx.showToast({title: 加载中,icon: loading})//***需要添加的代码***if(this.page 0){this.records []}//需要传到后台的数据const data {openid: this.userinfo.openId,//***需要添加的代码***page: this.page}//将后台传过来的数据保存到records变量中const records await get(/weapp/getrecords, data)//concat是拼接数组的方法将新查出的数据拼接到records数组中//***需要编辑的代码***// this.records records.recordsthis.records this.records.concat(records.records)//***需要添加的代码***//每次在数据库中查找15条数据如果查出的数据不足15条说明这是最后一页了将more改为falseif (records.records.length 15 this.page 0) {this.more false}//通过records数组的长度来判断show_record变量为false或者trueif(this.records.length 0){this.show_record true}else{this.show_record false}console.log(从后台返回的记录数据,this.records)wx.hideToast()
}
4、到达底部加载数据onReachBottom函数是到达小程序页面底部会触发的函数我们在这里面调用getRecords方法每次小程序页面下拉到底部都会自动触发getRecords方法调用record数据//参考代码无需粘贴
//onShareAppMessage(e) {//...
//},// 需要添加的代码
onReachBottom () {// 如果more为false说明没有更多数据了不需要再加载getRecords方法return结束加载if (!this.more) {return false}// 加载下一页this.page this.page 1console.log(this.page,this.page)this.getRecords()
},
5、修改后台操作文件也就是server/controllers/getrecords.js文件接收到当前的页面page数据加载相应数据//原代码
const {openid} ctx.request.query//修改为
const {openid,page} ctx.request.query
//原代码
const records await mysql(records).select(id,add,mark,note,create_time).where(openid,openid).orderBy(id,desc)//修改为
const records await mysql(records).select(id,add,mark,note,create_time).where(openid,openid).orderBy(id,desc).limit(15).offset(Number(page) * 15)
limit n offset m是mysql的分页语句 代码从m行开始查查找n条数据6、重置页面每次切换到记录页面用户应该最想看到最新数据所以需要将page变量设为01给getRecords方法添加一个参数init并且当init为true时将page重置为0more重置为true//getRecords方法添加一个参数init
async getRecords (init) {if(init){this.page 0this.more true}//参考代码无需粘贴//wx.showToast({//title: 加载中,//icon: loading//})//...
//}
2编辑onShow中的getRecords方法添加参数true//原代码
this.getRecords()//修改为
this.getRecords(true)
7、下拉重置页面下拉函数我们之前讲过是onPullDownRefresh使用这个函数需要现在main.json文件里面授权1在src/pages/record文件夹下面新建main.json文件并在文件中添加代码{enablePullDownRefresh:true
}2在record.vue文件中添加onPullDownRefresh函数并调用getRecords方法//参考代码无需粘贴
//onReachBottom () {//…
//}//需要添加的代码
onPullDownRefresh () {this.getRecords(true)wx.stopPullDownRefresh()
}
8、测试保存所有修改的文件打开微信开发者工具测试效果在首页点击按钮生成20条左右的记录切换到记录页面查看下面几个方面1上翻小程序到达底部查看是否会自动加载数据加载完所有数据底部会显示没有更多数据2下拉小程序查看页面是否更新3切换页面查看页面是否更新作者猫宁一 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习热爱编程 可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录微信小程序全栈开发课程目录
