赞
踩
下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 onPullDownRefresh 。
最近在开发一个微信小程序项目,里面用到了下拉刷新重新加载数据的功能。做完后做了下总结。使用的是uni-app开发的,所以就以uni-app为例。
在pages.json的页面中“globalStyle”对象里面做全局配置:
“enablePullDownRefresh”: true
在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()
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。