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

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

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() //刷新完成后停止下拉刷新动效
    //后面的业务代码大家自行发挥
  },
  • 7
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值