微信小程序 下拉刷新及上拉加载原理解析


Posted in Javascript onNovember 06, 2019

这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1.下拉刷新的概念及应用场景。

概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据。

应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案。

微信小程序启动下拉刷新:

两种方式:

1.需要在app.json 的window选项中或页面配置中开启enablePullDownRefresh, 但是,一般情况下,推荐在页面配置中为需要的页面单独开启下拉刷新行为。

2.可以通过wx.startPullDownRefresh() 触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。

配置下拉刷新窗口的样式:

需要在app.json 的window选项中或页面配置中修改backbroundColor 和backgroundTextStyle 选项。

backgroundColor: 用来配置下拉刷新窗口的背景颜色,仅支持16进制颜色值。

backgroundTextStyle 用来配置下拉刷新loading 的样式,仅支持dark和light

onPullDownRefresh: 页面相关事件处理函数--监听用户下拉操作时执行

停止下拉刷新效果:

当处理万下拉刷新后,下拉刷新的loading 效果会一直显示,不会主动消失,需要手动隐藏下拉刷新的loading效果,此时,跳用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。

上拉加载更多

1.上拉加载更多的概念及应用场景。

概念: 在移动端,随着手指不断向上滑动,当内容将要到达屏幕底部的时候,页面会随之不断的加载后续内容,知道没有新内容位置,我们称之为上拉加载更多,上拉加载更多的本质就是数据的分页加载。

应用场景: 在移动端,列表数据的分页加载,首选的实现方式就是上拉加载更多。

配置上拉触底的距离:

可以在app.json的window 选项上或页面配置中设置触底的距离 onReachBottomDistance 单位为px,默认触底距离为50px。

监听上拉触底事件:onReachBottom() 函数,可以监听用户在当前页面的上拉触底事件,从而实现上拉加载更多列表数据的效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue 解决文本框被键盘遮住的问题
Nov 06 #Javascript
vue点击页面空白处实现保存功能
Nov 06 #Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 #Javascript
微信小程序网络请求实现过程解析
Nov 06 #Javascript
vue 自定义右键样式的实例代码
Nov 06 #Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 #Javascript
vue 解决computed修改data数据的问题
Nov 06 #Javascript
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
劣质的PHP代码简化
2010/02/08 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
jquery密码强度校验
2015/12/02 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
详解Node 定时器
2018/02/26 Javascript
vue filters的使用详解
2018/06/11 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
python中logging模块的一些简单用法的使用
2019/02/22 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
python使用smtplib模块发送邮件
2020/12/17 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
光荣入党自我鉴定
2014/01/22 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
庆七一晚会主持词
2015/06/30 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
Mysql 一主多从的部署
2022/05/20 MySQL