微信小程序下拉刷新PullDownRefresh的使用方法


Posted in Javascript onNovember 29, 2018

前言

下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 onPullDownRefresh 。虽然微信的官方文档有很多坑,但下拉刷新介绍的还是很全面的。

微信小程序下拉刷新PullDownRefresh的使用方法

微信小程序--下拉刷新.jpg

最近开发一款微信小程序,里面有用到下拉刷新数据的功能。于是,又开始折腾了...

一、onPullDownRefresh回调

初略看了下文档,发现小程序js中有onPullDownRefresh回调,果断重写之...

// http://itlao5.com
 onPullDownRefresh: function () {
 console.log('onPullDownRefresh')
 this.queryData(id)
 },

二、enablePullDownRefresh支持

然而,却发现不管怎么下拉,始终触发不了js回调。

只好继续看文档,发现,需要再json中配置支持下拉刷新,即:

"enablePullDownRefresh": true // 请注意是true,不是"true"字符串,
    // 部分开发者发现设置了还是无效,
    // 可能是因为设置的"enablePullDownRefresh": "true"

这个可以在app.json中进行全局配置,使所有页面都带有下拉刷新功能;也可以在需要下拉刷新功能的page对应的json中配置。

这下好了,下拉刷新功能完成了。

三、backgroundTextStyle配置

但是,还有一点点不完美的地方,别人的小程序,下拉刷新时,可以看到顶部有三个点闪烁的动画;而我的小程序顶部一片空白。

原来,还有一个配置,"backgroundTextStyle": "",支持 dark/light;因为我的背景是白色的,此时,不进行这个配置,因为颜色的缘故,三个点闪烁的动画就看不到了,因此,白色背景需要进行以下配置:

"backgroundTextStyle": "dark"

四、stopPullDownRefresh停止

此外,微信小程序还提供了停止下拉刷新效果的api,如果发现进入刷新状态,无法停止,可以使用这个api

// 小程序提供的api,通知页面停止下拉刷新效果
 // http://itlao5.com
 wx.stopPullDownRefresh;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
JS中Array数组学习总结
Jan 18 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 #Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 #Javascript
js中this的指向问题归纳总结
Nov 28 #Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 #Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 #Javascript
Vue触发式全局组件构建的方法
Nov 28 #Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 #Javascript
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
vue2过滤器模糊查询方法
2018/09/16 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
Python 备份程序代码实现
2017/03/06 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Django 开发环境配置过程详解
2019/07/18 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
淘宝客服专员岗位职责
2014/04/11 职场文书
综治维稳工作汇报
2014/10/27 职场文书
爱心募捐感谢信
2015/01/22 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
初一军训感言
2015/08/01 职场文书
高中运动会广播稿
2015/08/19 职场文书