uni-app 数据下拉刷新功能

原创已于 2022-08-04 02:09:46 修改 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #vue.js

于 2022-03-23 14:05:42 首次发布

Vue 同时被 3 个专栏收录

198 篇文章

订阅专栏

小程序

15 篇文章

订阅专栏

uni-app

9 篇文章

订阅专栏

本文详细介绍了如何在uni-app中实现下拉刷新和上拉加载更多的功能。首先，在pages.json配置文件中开启goods_list页面的下拉刷新效果，并设置相关样式。然后，监听onPullDownRefresh事件，重置数据并重新请求接口。最后，修改getGoodsList函数，接收回调函数并在请求完成后调用，以实现上拉加载更多功能。

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

"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": {}
  }]
}]

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

// 下拉刷新的事件
onPullDownRefresh() {
  // 1. 重置关键数据
  this.queryObj.pagenum = 1
  this.total = 0
  this.isloading = false
  this.goodsList = []

  // 2. 重新发起请求
  this.getGoodsList(() => uni.stopPullDownRefresh())
}

修改 getGoodsList 函数，接收 cb 回调函数并按需进行调用：

// 获取商品列表数据的方法
async getGoodsList(cb) {
  this.isloading = true
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  this.isloading = false
  // 只要数据请求完毕，就立即按需调用 cb 回调函数
  cb && cb()

  if (res.meta.status !== 200) return uni.$showMsg()
  this.goodsList = [...this.goodsList, ...res.message.goods]
  this.total = res.message.total
}