微信小程序> 微信小程序下拉刷新:onPullDownRefresh正确使用姿势

微信小程序下拉刷新:onPullDownRefresh正确使用姿势

浏览量:824 时间: 来源:weixin_33826609

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

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() //刷新完成后停止下拉刷新动效    //后面的业务代码大家自行发挥  },

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎