入门微信小程序(含实战) [第九篇] -- 下拉刷新和上拉加载
下拉刷新和上拉加载是两个独立又密切联系的功能,上拉加载需要服务器端有分页机制,而下拉刷新除了重新获取信息外还要对之前的状态和页码进行初始化。
一个一个来吧。
服务器端分页
其实yii2早就已经为我们准备好了,当我们访问了GET /xcx/albums的时候,返回的其实是一个带有分页信息的json,如果你对yii2很熟悉,一定知道activeDataProvider本身就是带分页功能的,默认每页20条数据。
我们再来回顾一下GET /xcx/albums的返回
没错,在响应的header里你一定发现了上面四条数据,就是它们,每次接口的返回其实yii2已经告诉了我们当前的页码、一共多少页、每页的数据量以及一共多少条数据。
OMG,这不就是我们想要的么?~~~~
好,那就简单了,我们只需要在接口处增加page参数告诉我们要请求那一页就可以了。
小程序端
现在知道后台已经能按照页码返回数据了,接下来就是小程序,对于移动应用一般不会是直接显示页码然后点击,更多是随着我们屏幕的下滑逐渐出现新的内容,就是所谓的上拉加载。当然还有个下拉刷新,这个本章最后一部分进行讲解。
关于上拉加载
上拉加载主要利用了js的onReachBottom函数,它表示“页面上拉触底事件的处理函数”,我们就在这一刻从后台获取新的数据并且添加到现有页面下方。
首先我需要在小程序页面定义一个变量(page)代表即将要获取第几页,然后再定义一个获取后台数据的函数就可以了,记住这个获取是要带页面参数的。
为此我独立出一个函数专门做信息获取这件事情,如下图
不知道你是否看明白,在onReady函数内我们完成了数据的第一次加载。当然也许你更关心的是N+1次加载的事情,接下来我们就来实现它,启动onReachBottom函数。
试想一下当我们获取了第一页以后,页面下来到底部我们需要获取第二页,此刻page参数应该2,为此我们需要对loadList做一次小手术,这次手术完成了两件事情。
- 对page的赋值
- 对现有数据和新数据的合并
看看下图的改造
当从后台获取数据后进行循环,然后添加现有的数据数组中,就像上图的绿色框框内的代码一样。合并数据后执行page++供下一次使用。
而每次页面到底部的时候都进行一个onReachBottom函数,它执行了loadList。
就这样每次到底部都向后台要数据
疑问来了?????是的,第一个问题就是page到什么时候是个头,按照上面的逻辑会一直递增,然后获取数据,这显然是逻辑错误的,我们应该告诉小程序一共有多少页,当页面达到数量后就不在获取数据了。
为此我们来增加一个新变量 hadLastPage = false,默认代表还没有到达最后一页,然后继续改造loadList,在这里用到了yii2给我们响应header中的那些数据,看下图
逻辑不复杂,红色框内的意思是判断yii2的数据返回,如果当前页数已经等于总页数说明最后一页了,则设置hadLastPage=当前页数,否则page++
另外在函数最前端进行了一次判断,调用此函数时候,如果发现hadLastPage不是false,则直接提示到底了,不再去后台获取数据。
关于下拉刷新
小程序对下拉刷新是有一定支持的,那就是json文件里的enablePullDownRefresh参数,当你如下设置enablePullDownRefresh时候
另外当我们设置了enablePullDownRefresh=true后会触发js文件中的onPullDownRefresh函数,你可以在里面做要做的事情,比如对页面的初始化,对数据列表的清空等等。
在上文我们已经完成了数据的上拉加载,接下来开始具体编写onPullDownRefresh函数。
一系列的初始化,记得最后执行一次wx.stopPullDownRefresh();将下拉关闭,否则那些小点点是不会消失的。
小提示:下拉刷新的样式在一定程度上也可以通过backgroundColor和backgroundTextStyle改变,比如你可以做一个下拉后背景是褐色,小点点是亮色的感觉。
总结
以上就是下拉刷新和上拉加载,这只是其中一种思路,聪明的你一定会有更有趣的实现,可以留言此贴让我看到。
现在实现了相册的加载,但是这些数据都是假的,下一篇我们是实现新建和编辑相册,你也将学习到如何使用小程序的表单功能。
另外代码已经同步到了github上,欢迎下载同步学习 github.com/abei2017/xg…
入门微信小程序(含实战) [第九篇] -- 下拉刷新和上拉加载相关推荐
- 每日三思:微信小程序多层级父子组件如何在子组件滚动加载
碰到的问题是如果将孙子组件单独拿出来是能滚动加载数据的,但是如果父组件存在切换的tab,子组件也存在tab切换,子组件就无法滚动加载数据 示意图 代码结构 刚开始的处理思路 在子组件中使用滚动加载,但 ...
- 手把手带你学习微信小程序 —— 项目实战篇
微信小程序项目实战篇 WeChat-applet 1.支付宝界面展示 2.微博发帖功能实现 3.时间格式化案例 4.微信红包界面展示 5.微信消息删除案例 6.微信icon 组件 6.1 支付成功界面 ...
- 微信小程序python入门教程-2020Python+微信小程序开发实战(视频+课件)
本套课程出自老男孩IT教程的Python+微信小程序开发实战官网售价79元,课程基于微信小程序平台开发的的拍卖系统.课程分为4个章节微信小程序快速入门用微信小程序快速开发认证和发布动态模块,第二章拍卖 ...
- 视频教程-微信小程序开发实战之番茄时钟开发-微信开发
微信小程序开发实战之番茄时钟开发 4年web前后端开发经验,熟悉PHP,Python后端技术,熟悉基于Lnmp环境的项目开发和部署,擅长Yii,ThinkPHP,CI,Django,Flask等国内外 ...
- JEECG社区微信小程序开发实战-张代浩-专题视频课程
JEECG社区微信小程序开发实战-511人已学习 课程介绍 微信小程序开发培训,包含环境搭建.实例讲解.对接支付功能等课题. 课程收益 微信小程序开发培训,包含环境搭建.实例讲 ...
- 视频教程-2020最新微信小程序基础+实战精讲视频-微信开发
2020最新微信小程序基础+实战精讲视频 负责过多个软件项目的研发.设计和管理工作,拥有项目管理师认证.项目监理师中级认证.出版过的图书有<微信小程序开发图解案例教程><Axure ...
- 视频教程-微信小程序开发【初级篇 / 附案例】-微信开发
微信小程序开发[初级篇 / 附案例] 北风网讲师!瓢城Web俱乐部创始人,教学总监! 李炎恢 ¥129.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程, ...
- 【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
发送手机短信验证码 前言 一. 准备工作 二. 配置 三. 实战代码(仅仅是后台代码,前端传入手机号) 总结 前言 在网站和移动应用中利用短信验证码进行信息确认是最常用的验证手段.随着短信验证码的技术 ...
- 微信小程序入门级实战开发指南
微信小程序入门级实战开发指南 概述 微信小程序,简称小程序,英文名Mini Program,是一种"不需要下载安装"即可使用的应用(实际上是需要下载安装的,只是整个过程被简化到可以 ...
最新文章
- v-vim 代码批量缩进,字符串精确查找及替换
- linux03-用户与组
- php控制器面向对象编程,php面向对象编程
- NFS4文件锁机制探秘
- Linux 命令之 sudo -- 以其他用户身份来执行命令
- php文件遍历类,PHP 遍历文件夹及文件类及处理类
- Docker内核参数优化
- 性能分析:处理器、磁盘I/O、进程、网络分析方法 http://www.cnblogs.com/fnng/archive/2012/10/30/2747246.html...
- 如何从论文中挖掘和研究思路的办法
- 【论文复刻】高技术企业认证政策是否促进了中国创新?(heckman两阶段模型 PSM-DID)论文复现
- oneDrive登陆界面空白 的解决办法
- linux 安装qt mysql库_Linux下QT平台Mysql数据库开发环境配置
- 7-24 猜数字游戏
- 算法自学笔记:Convex Hull问题
- Surely Vue-去除水印
- ListContainer教程
- android高德地图线路,独立路径规划-路线规划-开发指南-Android 导航SDK | 高德地图API...
- Java实现建造者模式
- 图像超分辨率重构实战
- 视频伪原创工具 修改视频md5值