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


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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
vue-router单页面路由
Jun 17 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
php无限遍历目录示例
2014/02/21 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
DOM 高级编程
2015/05/06 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
React中jquery引用的实现方法
2017/09/12 jQuery
Vue中 axios delete请求参数操作
2020/08/25 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python基于右递归解决八皇后问题的方法
2015/05/25 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python正则表达式常用函数总结
2017/06/24 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
python中字符串的编码与解码详析
2020/12/03 Python
numba提升python运行速度的实例方法
2021/01/25 Python
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL