有你,世界才更有趣!

使用mpvue重构个人小程序(九)下拉刷新

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

配置

1、全局配置

"enablePullDownRefresh": true,
《使用mpvue重构个人小程序(九)下拉刷新》

2、单独页面局部配置

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

《使用mpvue重构个人小程序(九)下拉刷新》

使用

和methods 平级使用

onPullDownRefresh () {
// to doing..
console.log('shuaxin')
// 停止下拉刷新
wx.stopPullDownRefresh()
《使用mpvue重构个人小程序(九)下拉刷新》

模板中使用也是如此:

《使用mpvue重构个人小程序(九)下拉刷新》

重新编译,下拉刷新一下,结果:

《使用mpvue重构个人小程序(九)下拉刷新》

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

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

onPullDownRefresh () {
console.log('下拉刷新1')
let that = this
wx.showNavigationBarLoading() // 在标题栏中显示加载
// 模拟加载
setTimeout(function () {
// complete
that.getTodaySinfo()
wx.hideNavigationBarLoading() // 完成停止加载
wx.stopPullDownRefresh() // 停止下拉刷新
}, 1500)
},
《使用mpvue重构个人小程序(九)下拉刷新》

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

《使用mpvue重构个人小程序(九)下拉刷新》

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

《使用mpvue重构个人小程序(九)下拉刷新》

下拉一下:

《使用mpvue重构个人小程序(九)下拉刷新》

下拉松手

《使用mpvue重构个人小程序(九)下拉刷新》

完美!

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注