上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面(七)--分页加载记录数据...

945207bc634e751740ce80786c7e4702.png

现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据

每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成

1、添加data变量

编辑record.vue文件,添加两个变量page和more

page默认为0,表示当前的页数;more默认为true,用来控制底部显示的信息

data () {return {show_record:false,userinfo:{},records:[],page: 0,more: true}
},

2、添加底部页面代码

<!-- 参考代码,无需粘贴
<RecordList :key='index' v-for='(record,index) in records' :record = 'record'></RecordList> --><!-- 需要添加的部分 -->
<!-- 如果more为false,底部显示「没有更多数据」 -->
<p class="text-footer" v-if="!more">没有更多数据
</p>
<!-- 如果records数据一共不到15条,底部什么也不用显示 -->
<p class="text-footer" v-else-if="records.length < 15">
</p>
<!-- 如果more为true,并且总记录大于15条,底部显示加载中 -->
<p class="text-footer" v-else>加载中···
</p>

3、编辑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变量设为0

(1)给getRecords方法添加一个参数init,并且当init为true时,将page重置为0,more重置为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)切换页面,查看页面是否更新

12c27b3b617375acc952af26b76f39ad.png
作者:猫宁一 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~点击查看课程目录:微信小程序全栈开发课程目录

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/537291.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring cloud eureka服务注册和调用

SPRING INITIALIZR构建工程 spring boot 可通过SPRING INITIALIZR构建项目访问SPRING INITIALIZR官网&#xff0c;填写项目相关信息后&#xff0c;生成项目。将下载的项目解压&#xff0c;打开idea&#xff0c;file-->new-->project from existing sources。import proje…

打印工资条怎么做到每个人都有表头明细_朋友说:能不能用python,帮我写一个“制作工资条”的自动化程序?...

本文说明今天和一个朋友吃饭&#xff0c;她说我经常使用Excel制作工资条&#xff0c;但是每个月都要做一遍&#xff0c;你能不能用python写一个代码&#xff0c;能够自动化完成这个工作。这当然可以啦&#xff0c;就是这么牛逼&#xff01;我们先来看看原始数据是什么样子的。那…

做优化的数据库工程师请参考!CynosDB的计算层设计优化揭秘

本文由云社区发表本文作者&#xff1a;孙旭&#xff0c;腾讯数据库开发工程师&#xff0c;9年数据库内核开发经验&#xff1b;熟悉数据库查询处理&#xff0c;并发控制&#xff0c;日志以及存储系统&#xff1b;熟悉PostgreSQL&#xff08;Greenplum&#xff0c;PGXC等&#xf…

netty发送数据_看完这篇还不清楚Netty的内存管理,那我就哭了

说明在学习Netty的时候&#xff0c;ByteBuf随处可见&#xff0c;但是如何高效分配ByteBuf还是很复杂的&#xff0c;Netty的池化内存分配这块还是比较难的&#xff0c;很多人学习过&#xff0c;看过但是还是云里雾里的&#xff0c;本篇文章就是主要来讲解&#xff1a;Netty分配池…

数字化改革体系架构“152”两次迭代升级为“1612”

数字化改革体系架构已经完成两次迭代&#xff0c;152-1512-1612。 2021年&#xff0c;浙江在全国率先启动一项关系全局、影响深远、制胜未来的重大集成改革——数字化改革&#xff0c;并确定为全面深化改革的总抓手。 2021年2月18日&#xff0c;数字化改革大会“152”工作体系…

python 40位的数减个位数_Python数据分析入门教程(五):数据运算

作者 | CDA数据分析师进行到这一步就可以算是开始正式的烹饪了&#xff0c;在这部分之前的数据操作部分我们列举了一些不同维度的分析指标&#xff0c;这一章我们主要看看这些指标都是怎么计算出来的。一、算术运算算术运算就是基本的加减乘除&#xff0c;在Excel或者Python中数…

数字化改革“152”体系详解

架构图 “1” 即一体化智能化公共数据平台&#xff08;平台大脑&#xff09;&#xff0c;按照“统一规划、统一支撑、统一架构、统一平台、统一标准、统一建设、统一管理、统一运维"的要求&#xff0c;建设省市县三级公共数据平台&#xff0c;叠加三级“大脑功能&#xf…

数字化改革“141”体系

县级以上是“152”大框架&#xff0c;县以下是“141”体系。 141体系是&#xff1a;县级社会治理中心、乡镇&#xff08;街道&#xff09;基层治理“四个平台”、村社网格。 “1” 第一个“1”指县级社会治理中心。 “4” 第二个“4”指乡镇&#xff08;街道&#xff09;基…

接口做的好怎么形容_淘宝直播预告怎么做才合格?如何做好?

很多淘宝商家在直播前没有做淘宝直播预告&#xff0c;或者不知道怎么去做直播预告&#xff0c;这对直播的效果会有很大的影响&#xff0c;那么直播前如何做好直播预告呢?怎样的直播预告才是合格的&#xff0c;下面来了解一下。1.必须去淘宝直播中控台发布。因为手机上发布目前…

“1+7+N”改革工作体系介绍

2021年&#xff0c;浙江省确定了“17N”的改革工作体系&#xff0c;要求以全面深化改革新成效再创体制机制新优势。&#xff08;2022年已经升级为“1612N”&#xff0c;点击阅读&#xff09; “1” 数字化改革&#xff0c;这是浙江全面深化改革的总抓手。将聚焦打造全球数字变…

浙江省数字化改革回顾(2022年5月)

事业的伟大在于目标的壮丽&#xff0c;也在于过程的壮丽&#xff1b;改革的成果在于享有的丰富&#xff0c;也在于经历的丰富。2021年2月18日&#xff0c;春节假期后首个工作日&#xff0c;浙江省委召开全省数字化改革大会&#xff0c;在全国率先开启数字化改革探索实践。此后&…

python 某个数是不是在某个范围内_教写一个简单的python小程序(04)

点击蓝字关注我们 会酸的柚子Python爱好者搞机少年七夕结束了~酸柚也是被强塞了满嘴的狗粮在这样充满恋爱腐朽气息的一天酸柚也是马不停蹄的在赶稿子兄弟们&#xff0c;给我顶起来呀~我们来看看今日的题目可能很多小伙伴对完全平方数这个概念有点生疏了完全平方数数学上&#x…

浙江公布2022年数字化改革“最系列“成果 评选出最佳应用104项

10月29日&#xff0c;省委改革办&#xff08;省数改办&#xff09;公布了2022年数字化改革“最系列”成果。该评选由省委改革办&#xff08;省数改办&#xff09;会同省委政研室、省人大常委会法工委、省市场监管局和省大数据局共同开展&#xff0c;评选了最佳应用104项、最强大…

dot net core 使用 IPC 进程通信

原文:dot net core 使用 IPC 进程通信版权声明&#xff1a;博客已迁移到 http://lindexi.gitee.io 欢迎访问。如果当前博客图片看不到&#xff0c;请到 http://lindexi.gitee.io 访问博客。本文地址 https://blog.csdn.net/lindexi_gd/article/details/79946496 dot net core 使…

Android手机用wifi连接adb调试的方法

https://www.jianshu.com/p/dc6898380e38 0x0 前言 Android开发肯定要连接pc的adb进行调试&#xff0c;传统的方法是用usb与pc进行连接&#xff0c;操作简单即插即用&#xff0c;缺点是pc上必须得有对应手机的usb驱动程序&#xff0c;对于谷歌亲儿子系列和三星摩托等外国品牌而…

控制台应用程序换换为窗体应用_Epic为开发者设计了一套iPhone使用的运动捕捉应用程序...

玩懂手机网7月13日资讯&#xff0c;我们都知道对于游戏或者是动漫开发者来说&#xff0c;运动捕捉设备是一套非常昂贵的设备&#xff0c;需要非常专业的独立开发人员&#xff0c;大量的时间才能完成&#xff0c;最近Epic为开发者设计了一套iPhone使用的运动捕捉应用程序。这套i…

蚂蚁金服亿级并发下的移动端到端网络接入架构解析

为了与金融从业者、科技从业者共同探讨金融 业务的深层次问题&#xff0c;蚂蚁金服联手 TGO 鲲鹏会上海分会&#xff0c;在 12 月 8 日举办了「走进蚂蚁金服&#xff1a;双十一背后的蚂蚁金服技术支持」活动。蚂蚁金服高级技术专家贾岛为大家分享了《亿级并发下的蚂蚁移动端到…

如何根据视频的宽屏与竖屏来排序?

原理 宽屏与竖屏是根据 帧高度 与 帧宽度 来区分的 帧高度就是图片高度&#xff08;纵向的像素尺寸&#xff09;&#xff0c;帧宽度就是图片宽度&#xff08;横向的像素尺寸&#xff09;&#xff0c;分辨率就是&#xff08;高度x宽度&#xff09;。 windows11的文件排序&…

sap模块介绍_小迈说|SAP究竟有多少模块?

SAP究竟有哪些模块继上一期小迈说SAP&#xff01;SPA&#xff1f;的区别&#xff0c;相信大部分读者明白了我们与水浴按摩行业的分别&#xff0c;可是仅仅区分名字还不够&#xff0c;SAP还有众多的模块&#xff0c;这些又该怎么去了解呢&#xff1f;这就轮到肩负爱与责任的小迈…