当前位置:网站首页>uni-app 数据上拉加载更多功能
uni-app 数据上拉加载更多功能
2022-08-10 19:01:00 【船长在船上】
实现上拉加载更多
- 打开项目根目录中的
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": {}
}
]
}
]
- 在
goods_list
页面中,和methods
节点平级,声明onReachBottom
事件处理函数,用来监听页面的上拉触底行为:
// 触底的事件
onReachBottom() {
// 让页码值自增 +1
this.queryObj.pagenum += 1
// 重新获取列表数据
this.getGoodsList()
}
- 改造
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
}
优化:
通过节流阀防止发起额外的请求
- 在 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()
}
下一篇:uni-app 数据下拉刷新功能https://blog.csdn.net/SmartJunTao/article/details/123684580
边栏推荐
猜你喜欢
随机推荐
搭建自己的以图搜图系统 (一):10 行代码搞定以图搜图
Biotin-PEG4-IC(TFP ester/amine/NHS Ester/azide)特性分享
FPGA工程师面试试题集锦71~80
Rider调试ASP.NET Core时报thread not gc-safe的解决方法
FPGA:生成固化文件(将代码固化到板子上面)
FPGA:基础入门按键控制蜂鸣器
多种深度模型实现手写字母MNIST的识别(CNN,RNN,DNN,逻辑回归,CRNN,LSTM/Bi-LSTM,GRU/Bi-GRU)
MySQL安装步骤
L2-035 完全二叉树的层序遍历
servlet映射路径匹配解析
JVM内存和垃圾回收-11.执行引擎
「POJ 3666」Making the Grade 题解(两种做法)
set和map使用讲解
TikTok选品有什么技巧?
Today's bug, click on the bug that the Windows dynamic wallpaper disappears in the win10 taskbar, and no solution has been found yet.
NPDP|传统行业产品经理如何进行能力提升?
工业基础类—利用xBIM提取IFC几何数据
『牛客|每日一题』岛屿数量
2022-08-09 学习笔记 day32-IO流
[Teach you how to make a small game] Write a function with only a few lines of native JS to play sound effects, play BGM, and switch BGM