微信小程序 下拉刷新

1,207 阅读1分钟

方式一:(组件级)使用scroll-view

scroll-y 设置为true,允许纵向滚动
refresher-enabled 开启自定义下拉刷新
refresher-triggered 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
//wxml
<scroll-view scroll-y="{{true}}"  refresher-triggered="{{refreshing}}" refresher-enabled="{{true}}" bindrefresherrefresh="onPullDownRefresh"></scroll-view>

//js
data:{
    refreshing:false
},
// !下拉刷新
onPullDownRefresh: function () {
  if (!this.data.refreshing) { 
      this.setData({ refreshing: true, }) 
  }
  
  //刷新完成
  this.setData({refreshing:false});
},

方式二:(页面级)onPullDownRefresh

在json文件中设置 "enablePullDownRefresh": true ,
//下拉刷新
onPullDownRefresh: function () {


    //刷新完成
    wx.stopPullDownRefresh();
},