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


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实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 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实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
js 居中漂浮广告
2010/03/21 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
Python常用模块之requests模块用法分析
2019/05/15 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
工程造价自荐信
2013/10/09 职场文书
30岁生日感言
2014/01/25 职场文书
社会实践感言
2014/01/25 职场文书
仓管岗位职责范本
2014/02/08 职场文书
婚前协议书范本
2014/04/15 职场文书
项目负责人任命书
2014/06/04 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
医院领导班子整改方案
2014/10/01 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
分享python函数常见关键字
2022/04/26 Python