小程序下拉刷新的实现

小程序下拉刷新

官方文档中有示例和API 参考文档onPullDownRefresh | uni-app官网 (dcloud.net.cn)

 

1.使用onPullDownRefresh()这个方法来实现下拉刷新

例子如下：

 // 下拉刷新
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载图标
      setTimeout(() => {
        wx.hideNavigationBarLoading(); //完成停止加载
        wx.stopPullDownRefresh(); //得到数据后停止下拉刷新
      }, 400)
  },

 注意事项:需要将要加载的函数在onPullDownRefresh()这个事件方法里面调用。

2.使用wx.stopPullDownRefresh()停止下拉刷新

使用方式需要在你页面调用接口的最后一个方法中执行，就可实现。

3.其中最重要的一步，最容易被忽略的一步，需要在对应页面的json文件中加入enablePullDownRefresh这个属性。

 
    {
 
    "enablePullDownRefresh":true,
    "backgroundTextStyle": "dark"
 
    }

完成以上步骤就可实现下拉刷新。