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

<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);}
}

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

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

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