下拉刷新API

本文编辑：  大妖怪浏览 4750 1 版权所有，严禁转载

接口说明:

接口用法：

wxml

<view class="container">
  <view>
    <view class="page-section">
      <view class="page-body-info">
        <text class="page-body-text">下滑页面即可刷新</text>
      </view>
      <view class="btn-area">
        <button bindtap="stopPullDownRefresh">停止刷新</button>
      </view>
    </view>
  </view>
</view>

js

Page({
  onPullDownRefresh: function () {
    wx.showToast({
      title: 'loading...',
      icon: 'loading'
    })
    //你的业务逻辑
  },
  stopPullDownRefresh: function () {
    wx.stopPullDownRefresh({
      complete: function (res) {
        wx.hideToast()
        console.log(res, new Date())
      }
    })
  }
})

wxss

.page-body-info {
  background-color: transparent;
}
.btn-area{
  margin-top: 300rpx;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: space-between;
  font-size: 32rpx;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.page-body-text {
  font-size: 30rpx;
  line-height: 26px;
  color: #ccc;
}

主要方法：

【onPullDownRefresh】：【在 Page 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件】
【wx.stopPullDownRefresh】：【停止当前页面下拉刷新】

Page({
  onPullDownRefresh: function(){
    wx.stopPullDownRefresh()
  }
})

bug&tip：
1.需要在 config 的window选项中开启 enablePullDownRefresh(即在app.json文件的window下设置enablePullDownRefresh属性为true，默认为false)
2.当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新