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

上一节：使用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重构个人小程序（十）页面跳转传参