小程序上拉加载下一页数据

template 复制代码

<view class="load-tips" v-if="isLoading">
			<view class="loading-spinner"></view>
			<text>加载中...</text>
		</view>
		<view class="load-tips" v-else-if="noMoreData">
			<text>没有更多数据了</text>
		</view>

css 复制代码

/* 加载提示样式 */
.load-tips {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx 20rpx;
	color: #999;
	font-size: 28rpx;
	gap: 20rpx;
}

/* 加载转圈效果 */
.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #f3f3f3;
	border-top: 4rpx solid #64E9FF;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

javascript 复制代码

// 上拉加载更多
	onReachBottom() {
		console.log('上拉加载更多');
		this.loadMore();
	},
	// 页面隐藏时停止倒计时
	onHide() {
		this.stopCountdown();
	},
	// 页面卸载时清理定时器
	onUnload() {
		this.stopCountdown();
	}

javascript 复制代码

// 重置分页
		resetPagination() {
			this.pageNum = 1;
			this.ordList = [];
			this.noMoreData = false;
		},
		// 加载更多数据
		loadMore() {
			if (this.isLoading || this.noMoreData) return;
			this.pageNum++;
			this.getList();
		},

javascript 复制代码

isLoading: false, // 加载状态
			noMoreData: false, // 没有更多数据
			pageNum: 1, // 当前页码
			pageSize: 10, // 每页数量