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


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 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
js构造函数创建对象是否加new问题
Jan 22 Javascript
react-native android状态栏的实现
Jun 15 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
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 curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
浅谈php扩展imagick
2014/06/02 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
js函数排序的实例代码
2013/07/01 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
玩转方法:call和apply
2014/05/08 Javascript
生成二维码方法汇总
2014/12/26 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
python如何修改装饰器中参数
2018/03/20 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
仓库门卫岗位职责
2013/12/22 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android