上拉加载更多后台数据_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…

去从事有门槛有积累的工作

现在社会的IT工作&#xff0c;一时风光无限&#xff0c;但是积累性不足。跟老外比较起来&#xff0c;国内的IT算是民工级别的。再加上&#xff0c;前些年的培训机构&#xff0c;不断的输出水平很次但很能加班的「人才」进入这个行业&#xff0c;「劣币驱逐良币」的效果下&#…

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

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

自定义按钮 图片标题位置随意放置

自定义按钮UIControl 写在前面 #图标和文字在一起是开发难免的问题&#xff0c;系统的按钮默认是图片居左的文字居右的&#xff0c; 且图片和文字的距离不好调整&#xff0c;图片的位置更是让人头疼&#xff0c; 故在闲暇之余封装了一个控件。 复制代码所用到知识的 # 1、苹果系…

做优化的数据库工程师请参考!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”工作体系…

微软希望每个人有自己的人工智能朋友

微软正在和其他公司那样投资和研发人工智能技术&#xff0c;同时微软也希望人工智能技术能够深入我们的日常生活。 为此微软正在申请新的专利技术希望每个人在社交网络上都有自己的人工智能朋友可以随时随地的沟通交流。 实际上该专利属于已经实践的内容再来申请专利技术的&…

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;基…

spring boot——MockMvc的用法

1.pom配置 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId> </dependency> 2.所需对象及Controller public class User {private String id;private String username;private…

python一元加号_Python一元方程解算系统(需要Sympy库支持)

解算案例本文为实现python一元方程解算的源码案例(后续不定期更新)# -*- coding: UTF-8 -*-from sympy import *#设置一些可能抛出的异常def Warn(type):if type "missEquater":print "You missed the euqater!"elif type "excessiveEquater":…

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

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

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

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

傻傻分不清的javascript运行机制

学习到javascript的运行机制时&#xff0c;有几个概念经常出现在各种文章中且容易混淆。Execution Context(执行环境或执行上下文)&#xff0c;Context Stack (执行栈)&#xff0c;Variable Object(VO: 变量对象)&#xff0c;Active Object(AO: 活动对象)&#xff0c;LexicalEn…

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

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

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

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

Python:模块module

python中一个模块就是一个扩展名为.py的文件&#xff0c;也可能是预编译的.pyc文件。 引入模块用&#xff1a;import 模块名 使用引用模块中定义的标识符&#xff08;函数、变量、类&#xff09;用&#xff1a;模块名.标识符名 引入模块中的标识符用&#xff1a;from 模块名 im…

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

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