微信小程序 上拉刷新/下拉加载
小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式
onPullDownRefresh() //用户下拉刷新事件,onReachBottom() //用户上拉触底事件
onPullDownRefresh和onReachBottom是小程序的页面事件,官方文档描述”需要在app.json
的window
选项中或页面的json文件中开启enablePullDownRefresh
“,个人觉得还是在页面配置较好,毕竟不是每个页面都需要上拉刷新事件,
//json配置
{
"usingComponents": {},
"backgroundTextStyle":"dark",//dark:显示刷新动画
"enablePullDownRefresh":true,//允许下拉刷新
"onReachBottomDistance":50//距离底部多少px时触发上拉加载事件
}
使用方法
官方文档:”可以通过wx.startPullDownRefresh
触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致“,
意思是既可以通过用户滑动触发,也可以通过wx.startPullDownRefresh()
调用的方式执行onPullDownRefresh()方法,代码如下
onShow() {
setTimeout(()=>{
//方法调用的方式触发下拉刷新事件
wx.startPullDownRefresh()
},1000)
},
/**
* 下滑刷新事件
*/
onPullDownRefresh() {
//做些什么...
wx.stopPullDownRefresh()//得到结果后关掉刷新动画 },
上拉加载事件需要用户滑动,当距离页面底部的值到onReachBottomDistance的设置参数时,便会触发,代码如下
/**
* 上拉加载
*/
onReachBottom(){
//做些什么
......
},
最后看一个整体的代码
onShow() {
setTimeout(()=>{
wx.startPullDownRefresh()//通过方法调用刷新
},1000)
},
/**
* 下滑刷新事件
*/
onPullDownRefresh() {
wx.stopPullDownRefresh()//结束刷新 },
/**
* 上拉加载
*/
onReachBottom(){
//触发了上拉加载,做些什么
},
微信小程序 上拉刷新/下拉加载的更多相关文章
- 微信小程序之自定义select下拉选项框组件
知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 微信小程序小结(4) -- 分包加载及小程序间跳转
分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...
- 微信小程序(2)--下拉刷新和上拉加载更多
下拉刷新 1.首先在.json文件中配置(如果在app.json文件中配置,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面下拉刷新.) 具体页面的.json文件: ...
- 微信小程序scroll-view不能实现下拉刷新
一般在列表展示页面,会使用到上拉加载和下拉刷新功能,在scroll-view中有bindscrolltolower事件,可以实现上拉加载功能,但是却没法实现下拉刷新. 如需同时使用两种功能,解决步骤如 ...
- 微信小程序云开发-列表下拉刷新
一.json文件开启页面刷新 开启页面刷新.在页面的json文件里配置两处: "enablePullDownRefresh": true, //true代表开启页面下拉刷新 &qu ...
- 微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况
项目需要做了一个图片拖动指定组件上删除,和排序的功能android测试正常, ios会出现拖动图片页面也跟着下滑的尴尬情况. 查文档下拉刷新配置默认是关闭的,后经查找文档发现在本页面page.json ...
- 微信小程序手动实现select下拉框选择
在小程序中没有像h5中的下拉 标签的 picker又满足部了,那就自己动手写 <view class='list-msg'> <view class='list-msg1'> ...
- 微信小程序云开发-列表数据分页加载显示
一.准备工作 1.创建数据库nums,向数据库中导入108条数据 2.修改数据库表nums的权限 二.新建页面ListPaginated 1.wxml文件 <!-- 显示列表数据 --> ...
- 微信小程序:添加全局的正在加载中图标效果
在发送请求的时候,显示一个正在加载中的小图标.在加载下一页的时候也显示正在加载中.同时数据请求回来了,把加载中进行关闭. 开发----API-----界面 在哪里添加这两段代码会比较方便呢?一个项目有 ...
随机推荐
- jenkins中通过Publish Over SSH将项目部署到远程机器上
Publish Over SSH插件使用在使用Publish Over SSH之前,需要制作SSH私钥.机器间做免密登录配置.假设机器A,ip为192.168.AA.AAA,机器B: 192.168. ...
- postman杂记
接到测试任务,测试6个接口 rap2 上的接口比较多,整体导出内容太多 就一个接口一个接口的,复制到了postman上 rap2部分接口,开发没有备注简介内容:通知开发备注下 对接口的理解,还是靠功能 ...
- wiki团队协作软件Confluence
一.准备环境 准备环境 lamp(Linux.apache.mysql.php)框架 centos7 java jdk1.8.0_111 Distrib 5.5.52-MariaDB confluen ...
- 应用安全 - 工具 - NScan - 漏洞汇总
工具介绍 Date 用途 端口服务扫描 | whois | nslookup Nscan v0.9.1 缓冲区溢出导致远程代码执行 Date 类型缓冲区溢出导致远程代码执行 影响范围 复现字符量过多 ...
- 15.永恒之蓝exp----
永恒之蓝exp 2017年,影响于全世界 SMB ripid7官网获取ms17-010的exp信息 Rapid7: https://www.rapid7.com/db/modules/exploit/ ...
- .net core 学习小结之环境配置篇
安装IIs对 netcore 的支持 https://docs.microsoft.com/en-us/aspnet/core/fundamentals/servers/aspnet-core-mod ...
- 深入理解java:1.3.1 JVM内存区域的划分(运行时数据区)
学习Java GC机制,可以帮助我们在日常工作中 排查各种内存溢出或泄露问题,解决性能瓶颈,达到更高的并发量,写出更高效的程序. 我们将从4个方面学习Java GC机制, 1,内存是如何分配的: 2, ...
- Hive-java.lang.ClassNotFoundException: org.apache.hadoop.hive.contrib.serde2.MultiDelimitSerDe
Task with the most failures(): ----- Task ID: task_1555476136794_8201_m_000000 URL: http://hadoop1:8 ...
- 关于postman
1 Get 1.1 Params 直接显示在url上,即url参数,用&分隔开. springboot中可以用@RequestParam注解获取. 1.2 Headers 1.3 Body 1 ...
- Sql server 执行计划详解
序言 本篇主要目的有二: 1.看懂t-sql的执行计划,明白执行计划中的一些常识. 2.能够分析执行计划,找到优化sql性能的思路或方案. 如果你对sql查询优化的理解或常识不是很深入,那么推荐几骗博 ...