小程序 之下拉刷新_小程序下拉刷新功能

前言

前面既然写了篇 上拉加载 ，那么就有下拉刷新，

分析

下拉刷新步骤是固定的,然而它的写法也是固定的 步骤为:

1.在配置文件中开启下拉刷新 在pages.json页面的配置对象中将 enablePullDownRefresh 位置为 true

2.在页面中监听页面下拉事件 在页面的js中,跟生命周期同级位置声明 onPullDownRefresh 函数

3.在刷新完成后关闭下拉刷新效果 有个疑问,下拉刷新,不应该是松开手后过了一会时间消失了,为何还有关闭这个效果呢?

因为这个效果消失只是在模拟器中消失,如果通过手机预览的话,会发现这个效果永远存在不会消失,所以说我们要手动的在刷新完成之后调用相应的函数关闭这个效果

onPullDownfresh() {
 // 停止下拉刷新效果
  uni.stopPullDownRefresh()
}

但真正的刷新就是 重新调用获取数据的方法,让页面重新渲染

实现

1. 在 pages.json 配置文件中，为当前的 goods_list 页面单独开启下拉刷新效果：

    "enablePullDownRefresh": true,
    哪个页面需要开启,就直接把它的false改为true就行
   

2. "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,是为当前页面配置上拉触底的距离，是上拉加载里面的内容
```

1. 监听页面的 onPullDownRefresh 事件处理函数：

   // 下拉刷新的事件
   onPullDownRefresh() {
     // 因为刷新后数据都重新渲染, 那我们要确保最新的数据在第一页 
     this.queryObj.pagenum = 1
     this.goodsList(uni.stopPullDownRefresh)
   }
   

2. 修改 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
   }