使用mpvue重构个人小程序（九）下拉刷新

前面有几节已经提到过下拉刷新，本节，再详细的归结一下。

配置

1、全局配置

"enablePullDownRefresh": true,

2、单独页面局部配置

没有main.json 自己新建一个即可。

使用

和methods 平级使用

onPullDownRefresh () {
  // to doing..
  console.log('shuaxin')
  // 停止下拉刷新
  wx.stopPullDownRefresh()

模板中使用也是如此：

重新编译，下拉刷新一下，结果：

执行顺序， 当前页面 -> 模板页面。

我们用模板 sinfo.vue 来测试下拉加载。

onPullDownRefresh () {
  console.log('下拉刷新1')
  let that = this
  wx.showNavigationBarLoading() // 在标题栏中显示加载
  // 模拟加载
  setTimeout(function () {
    // complete
    that.getTodaySinfo()
    wx.hideNavigationBarLoading() // 完成停止加载
    wx.stopPullDownRefresh() // 停止下拉刷新
  }, 1500)
},

先去写留言，再返回首页，下拉加载。

返点左上角返回是不会更新的：

下拉一下：

下拉松手

完美！

原文地址：使用mpvue重构个人小程序（九）下拉刷新