uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结

下拉刷新和上拉加载是业务上一个很常见的需求，在微信小程序里，提供了下拉刷新的方法 onPullDownRefresh 。

最近在开发一个微信小程序项目，里面用到了下拉刷新重新加载数据的功能。做完后做了下总结。使用的是uni-app开发的，所以就以uni-app为例。

开启下拉刷新

1、全局开启下拉刷新

在pages.json的页面中“globalStyle”对象里面做全局配置：

“enablePullDownRefresh”: true

2、局部开启下拉刷新

在pages.json的页面中“pages”中的“style”对象里面做配置：

“enablePullDownRefresh”: true

在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。

使用下拉刷新

在页面中增加监听页面的下拉刷新的事件

和date，onLoad等生命周期函数同级

onPullDownRefresh: function() {
    console.log('我被下拉了');
    //这里做页面刷新数据请求事件，例如重新请求接口
    //建议重置一些参数
    this.pageNum = 1
    this.currentDataList = []
    this.getPageList()
},

停止下拉刷新

当开启下拉后，处理完下拉刷新，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。需要调用 wx.stopPullDownRefresh() 来停止当前页面的下拉刷新效果。

getPageList(){
    //请求接口方法
    //接口返回成功或失败后
    // 关闭下拉刷新的效果
    wx.stopPullDownRefresh()
}