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


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 ajax执行后台方法
Mar 18 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
详解Bootstrap按钮
Jan 04 Javascript
JavaScript模拟push
Mar 06 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
vue操作dom元素的3种方法示例
Sep 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
德生H-501的评价与改造
2021/03/02 无线电
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
python多重继承实例
2014/10/11 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
物业管理求职自荐信
2013/09/25 职场文书
聘用意向书范本
2014/04/01 职场文书
中学生操行评语
2014/04/24 职场文书
优秀员工评优方案
2014/06/13 职场文书
英语教师个人工作总结
2015/02/09 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
如何写辞职信
2015/05/13 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB