uniapp 微信小程序实现上拉分页
2021/6/8 20:23:47
本文主要是介绍uniapp 微信小程序实现上拉分页,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在数据量较大时采用后端分页是常用的方法,与PC端不同的是,移动端分页往往不借助分页条,而是向上滑动触发对下一页的请求。在小程序里,向上滑动会触发onReachBottom事件,在该事件里发起对下一页的请求即可。
首先在列表底部添加一个提示表现当前列表状态
<div class="loading-text"> ----{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}---- </div>
// 默认值为 0 contentType: 0, contentText: { contentdown: "上拉显示更多", contentrefresh: "正在加载...", contentnomore: "没有更多数据了" }
contentText 有三种状态,
loadingType = 0 —— “上拉显示更多”
loadingType = 1 —— “正在加载...”
loadingType = 2 —— “没有更多数据了”
样式:
.loading-text { margin-top: 15rpx; text-align: center; font-size: 26rpx; color: #999; }
准备工作就绪!
首先在 onl oad 阶段请求列表数据
apiGetListData(this.page, this.rows).then(res => { let list = res.value.list; // 返回的数据等于请求的最大条数,表示下一页可能还有数据 if (list.length == this.rows) { this.loadingType = 0; } else { // 返回的数据小于请求的最大条数,表示下一页没有数据了 this.loadingType = 2; } this.list = list; })
其中 apiGetListData 是封装好的 Pormise 请求,需要的参数为当前页码(默认值是 1)以及每页数据条数(这里要注意设置的数据条数一定要能触底,不然永远触发不了onReachBottom事件)。
接着当用户滑动列表,就要重新发起请求,page + 1,rows 不变,请求到的数据跟原始数据拼接。这时我们会发现与上面的请求有很多重复操作,因此可以改写一下封装个新方法。
getListData() { apiGetListData(this.page, this.rows).then(res => { let list = res.value.list; // 返回的数据等于请求的最大条数,表示下一页可能还有数据 if (list.length == this.rows) { this.loadingType = 0; } else { // 返回的数据小于请求的最大条数,表示下一页没有数据了 this.loadingType = 2; } // 如果没有数据返回说明已经返回完了,记录状态,不用拼接 if(!coupons.length) { this.hasNoMoreData = true; return; } // 跟原始数据拼接 this.list = this.list.concat(list); }) }
onReachBottom() { // 如果没有数据了不再继续请求 if (this.hasNoMoreData) return; this.page++ // 显示“正在加载...” this.loadingType = 1; this.getListData(); },
至此,就完成了一个简单的小程序分页功能。
这篇关于uniapp 微信小程序实现上拉分页的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践