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

前言：哈喽，大家好，我是码喽的自我修养！今天给大家分享uni-app框架+vue实现上拉加载和下拉刷新功能！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到带大家，欢迎收藏+关注哦 💕

🌈🌈文章目录

一、实现上拉加载更多

1.配置pages.json

2.声明onReachBottom事件处理函数

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

4.使用节流阀进行优化

二、实现下拉刷新

1.配置pages.json

2.声明onPullDownRefresh事件处理函数

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

一、实现上拉加载更多

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() {// 让页码值自增 +1this.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) returnthis.queryObj.pagenum += 1this.getGoodsList()
}

判断数据是否加载完毕

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

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

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

// 触底的事件
onReachBottom() {// 判断是否还有下一页数据if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')// 判断是否正在请求其它数据，如果是，则不发起额外的请求if (this.isloading) returnthis.queryObj.pagenum += 1this.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 = 1this.total = 0this.isloading = falsethis.goodsList = []// 2. 重新发起请求this.getGoodsList(() => uni.stopPullDownRefresh())
}

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

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

// 获取商品列表数据的方法
async getGoodsList(cb) {this.isloading = trueconst { 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的内容请关注本人以前的文章或继续浏览下面的文章，希望大家多多支持码喽的自我修养~💕

🚀 个人简介：某大型国企高级前端开发工程师，7年研发经验，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作    者：码喽的自我修养❣️
📝 专    栏：uniApp与微信小程序
🌈 若有帮助，还请 关注➕点赞➕收藏 ，不行的话我再努努力💪💪💪 

---

 更多专栏订阅推荐：

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

⭐️ JavaScript深入研究

📝 前端工作常见问题汇总

✍️ GIS地图与大数据可视化