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


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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 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获取当前页面URL函数实例
2014/10/22 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php获取微信openid方法总结
2019/10/10 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
波兰珠宝品牌:YES
2019/08/09 全球购物
市场营销专业求职信
2014/06/17 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
婚前财产协议书范本
2014/10/19 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
创业计划书之书店
2019/09/10 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
MongoDB数据库之添删改查
2022/04/26 MongoDB
java实现web实时消息推送的七种方案
2022/07/23 Java/Android