博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序下拉刷新:onPullDownRefresh正确使用姿势
阅读量:6177 次
发布时间:2019-06-21

本文共 944 字,大约阅读时间需要 3 分钟。

需要写一个小程序下拉刷新效果,本以为应该很简单的东西,没想到微信在这个地方有点小坑?,废话不多,直接上步骤,手把手教大家怎么用。

1、需要在.json文件里设置 "enablePullDownRefresh": true,用于开启页面下拉加载效果,可以当前页设置也可以全局设置;

{    "enablePullDownRefresh": true //当前页    "backgroundTextStyle": "dark" //顶部显示颜色为深色的三个点}

or

"window": {    "enablePullDownRefresh": true //全局    "backgroundTextStyle": "dark" //顶部显示颜色为白色的三个点  }

2、注意在开发工具中模拟下拉动作时mac触摸板需要点击同时下拉才能模拟下拉动作,直接双指下拉不行;

3、第一设置好后用onPullDownRefresh()函数监听下拉动作,注意页面可能已经有默认的onPullDownRefresh()函数存在,需要去重;

/**  * 页面相关事件处理函数--监听用户下拉动作  */  onPullDownRefresh: function () {   }

4、重置页面初始数据+调用onLoad()函数制作重新加载效果;

onPullDownRefresh: function () {    var that = this;    that.setData({      currentTab: 0 //当前页的一些初始数据,视业务需求而定    })    this.onLoad(); //重新加载onLoad()  },

5、此时下拉刷新已经ok,但是还可以再优化下:onLoad()函数开头时设置wx.stopPullDownRefresh()停止下拉刷新效果,这样刷新完后就不会继续显示那三个点了~( ̄▽ ̄)~。

/**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    wx.stopPullDownRefresh() //刷新完成后停止下拉刷新动效    //后面的业务代码大家自行发挥  },

转载地址:http://mpzda.baihongyu.com/

你可能感兴趣的文章
8 jQuery学习笔记第八节 Jq的效果之自定义动画
查看>>
8月不支持 64 位,App 将无法上架 Google Play!需要怎么做?
查看>>
Vs - 基于 d3.js 和 vue.js 的数据可视化
查看>>
优雅地使用loading
查看>>
活动运营自动化平台实践
查看>>
Node8.0 之 Napi 探秘
查看>>
TypeScript入坑
查看>>
(三)spring cloud微服务分布式云架构-服务网关zuul初级篇
查看>>
Spring Cloud--Honghu Cloud分布式微服务云系统—System系统管理
查看>>
ubuntu老旧软件源
查看>>
Linux服务器配置——SAMBA
查看>>
我的WP7应用
查看>>
js打开连接 _无需整理
查看>>
我的友情链接
查看>>
Nginx配置:负载均衡和SSL配置
查看>>
复选框checkbox全选与否js
查看>>
Linux下配置IP的脚本
查看>>
poj1218——THE DRUNK JAILER
查看>>
WannaCry只是个开始?信息时代你急需的安全书单
查看>>
jquery 多控件添加相同事件
查看>>