本文編輯：  大妖怪瀏覽 5114 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可以停止當前頁面的下拉刷新