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


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从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
Javascript之Date对象详解
Jun 07 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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函数库
2010/02/15 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
机器学习10大经典算法详解
2017/12/07 Python
分析python切片原理和方法
2017/12/19 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python pip配置国内源的方法
2020/02/14 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
详解Scrapy Redis入门实战
2020/11/18 Python
利用python爬取有道词典的方法
2020/12/08 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
英语专业推荐信
2013/11/16 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
合伙经营协议书范本
2014/04/18 职场文书
健康家庭事迹材料
2014/05/02 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
置业顾问岗位职责
2015/02/09 职场文书
小学生家长意见
2015/06/03 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
Python中time标准库的使用教程
2022/04/13 Python