如何通过uni-app实现数据上拉加载更多功能的实例教程？

本文共计367个文字，预计阅读时间需要2分钟。

目录+实现：实现下拉加载更多+优化：通过节流防止额外请求+判断数据是否加载完成+总结+实现下拉加载更多+打开项目根目录中的+pages.json+配置文件，为+subPackages+分包中的+商品+goo+配置

目录

• 实现上拉加载更多
• 优化：
• 通过节流阀防止发起额外的请求
• 判断数据是否加载完毕
• 总结

实现上拉加载更多

打开项目根目录中的 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.$www.jb51.net/article/257740.htm

总结

到此这篇关于uni-app实现数据上拉加载更多功能的文章就介绍到这了,更多相关uni-app数据上拉加载更多内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！