uni-app实现微信小程序触底加载下一页拼接onReachBottom

最新推荐文章于 2025-03-22 20:52:32 发布

黑云压城After

最新推荐文章于 2025-03-22 20:52:32 发布

阅读量785

点赞数 4

文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/LY1879276369/article/details/131133177

版权

这篇文章展示了在Vue.js应用中实现分页加载数据的两种方法，一种使用base64加密请求参数，另一种则不加密。在onReachBottom事件中，检查hasMore标志来决定是否加载下一页，并更新currentPage。当数据不足10条时，设置hasMore为false。如果存在tabs切换，需重置currentPage为第一页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在data return中定义好需要得变量

currentPage是当前第几页，默认为第一页

hasMore用来判断下一页是否还有值需要加载

// 当前页码
				currentPage: 1,
				hasMore: true,

onReachBottom和methods同级

这里我是使用了base64加密，如果你的不需要加密，直接在请求中定义data，发起请求就可以了。第一个为加密写法，第二个不加密写法。

加密：

onReachBottom() {
			// 首先要判断是否还要继续加载
			if (!this.hasMore) {
				return
			}
			// 开始发起请求
			let datasss = {
				page: this.currentPage,
			}
			uni.request({
				url: 'xxxxxxx',//接口地址
				method: 'POST',
				success: (res) => {
					let vm = this
					// 得到数据后，先判断是否hasMore
					if (res.data.data.data.length < 10) {
						vm.hasMore = false;
					}
					this.currentPage++
					this.cpDD = this.cpDD.concat(res.data.data.data); //拼接数据
				},
				data: {
					params: base64.encode(JSON.stringify(datasss))  //base64加密写法
				},
			});
		},

不加密：

onReachBottom() {
			// 首先要判断是否还要继续加载
			if (!this.hasMore) {
				return
			}

			uni.request({
				url: this.YM + '/api/order/orderList',
				method: 'POST',
                header: {
				    'Content-Type': 'application/json;charset=UTF-8',
				},
                data: {
					page: this.currentPage,
				},
				success: (res) => {
					let vm = this
					// 得到数据后，先判断是否hasMore
					if (res.data.data.data.length < 10) {
						vm.hasMore = false;
					}
					this.currentPage++
					this.cpDD = this.cpDD.concat(res.data.data.data);
				},
				
			});
		},

如果你的业务需求中有tabs切换这些，在切换时记得将this.currentPage的初始值设置为第一页