uni-app框架+vue 实现上拉加载和下拉刷新功能

举报
码喽的自我修养 发表于 2024/07/24 23:21:28 2024/07/24
【摘要】 大家好,我是码喽的自我修养!今天给大家分享uni-app框架+vue实现上拉加载和下拉刷新功能!并提供具体代码帮助大家深入理解,彻底掌握!

一、实现上拉加载更多

1.配置pages.json

打开项目根目录中的pages.json配置文件,为subPackages分包中的商品goods_list页面配置上拉触底的距离:

"subPackages": [
   {
     "root": "subpkg",
     "pages": [
       {
         "path": "goods_detail/goods_detail",
         "style": {}
       },
       {
         "path": "goods_list/goods_list",
         "style": {
           "onReachBottomDistance": 150
         }
       },
       {
         "path": "search/search",
         "style": {}
       }
     ]
   }
 ]

2.声明onReachBottom事件处理函数

goods_list页面中,和methods节点平级,声明onReachBottom事件处理函数,用来监听页面的上拉触底行为:

// 触底的事件
onReachBottom() {
  // 让页码值自增 +1
  this.queryObj.pagenum += 1
  // 重新获取列表数据
  this.getGoodsList()
}

3.进行新旧数据的拼接处理

改造methods中的getGoodsList函数,当列表数据请求成功之后,进行新旧数据的拼接处理

// 获取商品列表数据的方法
async getGoodsList() {
  // 发起请求
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  if (res.meta.status !== 200) return uni.$showMsg()
  // 为数据赋值:通过展开运算符的形式,进行新旧数据的拼接
  this.goodsList = [...this.goodsList, ...res.message.goods]
  this.total = res.message.total
}

4.使用节流阀进行优化

通过节流阀防止发起额外的请求

在 data 中定义isloading节流阀如下:

data() {
  return {
    // 是否正在请求数据
    isloading: false
  }
}

修改getGoodsList方法,在请求数据前后,分别打开和关闭节流阀:

// 获取商品列表数据的方法
async getGoodsList() {
  // ** 打开节流阀
  this.isloading = true
  // 发起请求
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  // ** 关闭节流阀
  this.isloading = false
  // 省略其它代码...
}

onReachBottom触底事件处理函数中,根据节流阀的状态,来决定是否发起请求:

// 触底的事件
onReachBottom() {
  // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  if (this.isloading) return
  this.queryObj.pagenum += 1
  this.getGoodsList()
}

判断数据是否加载完毕

如果下面的公式成立,则证明没有下一页数据了:

当前的页码值 * 每页显示多少条数据 >= 总数条数
pagenum * pagesize >= total

修改onReachBottom事件处理函数如下:

// 触底的事件
onReachBottom() {
  // 判断是否还有下一页数据
  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕!')
  // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  if (this.isloading) return
  this.queryObj.pagenum += 1
  this.getGoodsList()
}

二、实现下拉刷新

1.配置pages.json

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

2.声明onPullDownRefresh事件处理函数

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

// 下拉刷新的事件
onPullDownRefresh() {
  // 1. 重置关键数据
  this.queryObj.pagenum = 1
  this.total = 0
  this.isloading = false
  this.goodsList = []
  // 2. 重新发起请求
  this.getGoodsList(() => uni.stopPullDownRefresh())
}

3.修改getGoodsList函数并调用结束刷新API

修改getGoodsList函数,接收cb回调函数并按需进行调用,通过uni.stopPullDownRefresh()结束刷新动态

// 获取商品列表数据的方法
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
}

 到此这篇关于vue+uni-app框架实现上拉加载下拉刷新功能的文章就介绍到这了,更多相关Vue和uni-app的内容请关注本人以前的文章或继续浏览下面的文章,希望大家多多支持码喽的自我修养~💕

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。