下拉刷新和上拉加载是业务上一个很常见的需求，在微信小程序里，提供了下拉刷新的方法 onPullDownRefresh 。
最近在开发一个微信小程序项目，里面用到了下拉刷新重新加载数据的功能。做完后做了下总结。使用的是uni-app开发的，所以就以uni-app为例。
开启下拉刷新
1、全局开启下拉刷新
在pages.json的页面中“globalStyle”对象里面做全局配置：
“enablePullDownRefresh”: true
2、局部开启下拉刷新
在pages.json的页面中“pages”中的“style”对象里面做配置：
“enablePullDownRefresh”: true
在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。
使用下拉刷新
1.在页面中增加监听页面的下拉刷新的事件
和date，onLoad等生命周期函数同级
onPullDownRefresh: function() {
console.log('我被下拉了');
//这里做页面刷新数据请求事件，例如重新请求接口
//建议重置一些参数
this.pageNum = 1
this.currentDataList = []
this.getPageList()
},
2.停止下拉刷新
当开启下拉后，处理完下拉刷新，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。需要调用 wx.stopPullDownRefresh() 来停止当前页面的下拉刷新效果。
getPageList(){
//请求接口方法
//接口返回成功或失败后
// 关闭下拉刷新的效果
wx.stopPullDownRefresh()
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188416.html
