前言
前面既然写了篇 上拉加载 ,那么就有下拉刷新,
分析
下拉刷新步骤是固定的,然而它的写法也是固定的 步骤为:
1.在配置文件中开启下拉刷新 在pages.json页面的配置对象中将 enablePullDownRefresh 位置为 true
2.在页面中监听页面下拉事件 在页面的js中,跟生命周期同级位置声明 onPullDownRefresh 函数
3.在刷新完成后关闭下拉刷新效果 有个疑问,下拉刷新,不应该是松开手后过了一会时间消失了,为何还有关闭这个效果呢?
因为这个效果消失只是在模拟器中消失,如果通过手机预览的话,会发现这个效果永远存在不会消失,所以说我们要手动的在刷新完成之后调用相应的函数关闭这个效果
onPullDownfresh() {
// 停止下拉刷新效果
uni.stopPullDownRefresh()
}
但真正的刷新就是 重新调用获取数据的方法,让页面重新渲染
实现
-
在
pages.json
配置文件中,为当前的goods_list
页面单独开启下拉刷新效果:"enablePullDownRefresh": true, 哪个页面需要开启,就直接把它的false改为true就行
-
"subPackages": [{ "root": "subpkg", "pages": [{ "path": "goods_detail/goods_detail", "style": {} }, { "path": "goods_list/goods_list", "style": { "onReachBottomDistance": 150, "enablePullDownRefresh": true, "backgroundColor": "#F8F8F8" } }, { "path": "search/search", "style": {} }] }]
回顾
```
"onReachBottomDistance": 150,是为当前页面配置上拉触底的距离,是上拉加载里面的内容
```
-
监听页面的
onPullDownRefresh
事件处理函数:// 下拉刷新的事件 onPullDownRefresh() { // 因为刷新后数据都重新渲染, 那我们要确保最新的数据在第一页 this.queryObj.pagenum = 1 this.goodsList(uni.stopPullDownRefresh) }
-
修改
getGoodsList
函数,接收fn
回调函数并按需进行调用:// 获取商品列表数据的方法 async getGoodsList(fn) { const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) // 关闭 // 判断是不是在下拉刷新中调用的,如果是,关闭 fn && fn() if (res.meta.status !== 200) return uni.$showMsg() this.goodsList = [...this.goodsList, ...res.message.goods] this.total = res.message.total }