uni-app实现数据上拉加载更多功能实例
实现上拉加载更多
打开项目根目录中的 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://www.jb51.net/article/257740.htm
总结
到此这篇关于uni-app实现数据上拉加载更多功能的文章就介绍到这了,更多相关uni-app数据上拉加载更多内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/SmartJunTao/article/details/123684356
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-10
- 这篇文章主要介绍了VSCode 配置uni-app的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了uni-app从安装到卸载的入门教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-15
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了uni-app 常用API,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-10-20
- 这篇文章主要给大家介绍了关于iOS列表上拉(平滑加载数据)自动加载数据问题的相关资料,本文实现的效果很多app都用的这种效果,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下...2021-07-12
- 这篇文章主要介绍了uni-app 的自定义组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-10-20
- 这篇文章主要介绍了uni-app使用微信小程序云函数的步骤示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-22
- 这篇文章主要介绍了uni-app微信小程序登录授权的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-22
- 下拉刷新和上拉加载更多功能是一个应用非常广泛的一个效果,最新项目中就遇到这个功能,这篇文章主要给大家介绍了关于iOS实现无感知上拉加载更多功能的思路与方法,需要的朋友可以参考下...2021-07-12
- 这篇文章主要介绍了微信小程序转化为uni-app项目的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-22
- 很多列表页总数量很大,一次性查询加载会导致页面有很长时间的空白期,自然体验感极差,就会使用分页加载数据,这篇文章主要给大家介绍了关于uni-app实现数据下拉刷新功能实例的相关资料,需要的朋友可以参考下...2022-08-02
- 数据列表在很多时候,经常会用到,下面这篇文章主要给大家介绍了关于uni-app实现数据上拉加载更多功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下...2022-08-02
- 注意:安卓9.0以上的手机需要在manifest 》app模块权限配置里面勾选PACKAGES 权限不然会无法安装...2021-06-23