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


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 相关文章推荐
JQuery 学习笔记 选择器之五
Jul 23 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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
php 字符串替换的方法
2012/01/10 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
js几个验证函数代码
2010/03/25 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python继承和抽象类的实现方法
2015/01/14 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
详解python播放音频的三种方法
2019/09/23 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
Python request操作步骤及代码实例
2020/04/13 Python
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
网络技术支持面试题
2013/04/22 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
个人收入证明范本
2014/01/12 职场文书
爱情保证书范文
2014/02/01 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
房地产项目合作意向书
2015/05/08 职场文书
律师函格式范本
2015/05/27 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书