微信小程序默认下拉刷新和自定义下拉刷新的方式

1.默认下拉刷新

在指定页面对应的.json配置文件中加入:

"enablePullDownRefresh": true,

"backgroundTextStyle": "dark"

在对应的.js文件中,写入onPullDownRefresh,如果存在则替换就好了

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh: function () {
  wx.showNavigationBarLoading() //在标题栏中显示加载
  //模拟加载
  setTimeout(function(){
    // complete
    wx.hideNavigationBarLoading() //完成停止加载
    wx.stopPullDownRefresh() //停止下拉刷新
  },1500);
},

2.自定义下拉刷新

在.wxml中,需要下拉刷新的区域外部套上一个scroll-view,如果不好使,给scroll-view设置一个高度

<scroll-view  refresher-enabled="true" bindrefresherrefresh="refresh" refresher-triggered="{{triggered}}">

refresher-enabled:开启自定义下拉刷新 默认false

refresher-triggered:设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发

bindrefresherrefresh:自定义下拉刷新被触发 

在.js中写入refresh,内容根据实际需求来写

refresh: function(){

  var that = this;

  setTimeout(function(){

    // complete

    that.onLoad()

    //停止

    that.setData({

      triggered:false

    })

  },1000);
},

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值