uniapp 云开发微信小程序分页加载数据

uniapp 云开发微信小程序在前端分页加载数据，不需要使用云函数。
官方教程：https://uniapp.dcloud.io/uniCloud/cf-database
效果图

云端数据结构

源代码

<template>
	<view>
		<view class="box" v-for="(item,index) in orderData" :key="index">

			<view class="head">
				<view class="order-no">订单号：{{item.orderid}}</view>
				<view class="order-no">{{item.status}}</view>
			</view>

			<view class="row" v-for="(item1,index1) in item.carData" :key="index1">
				<view class="row-left">
					<image class="row-img" :src="item1.imgUrl"></image>
					<view class="row-name">{{item1.name}}</view>
				</view>
				<view class="row-right">
					<view class="row-num"> x{{item1.num}}</view>
				</view>
			</view>

			<view class="foot">
				<view class="order-time">{{item.orderTime}}</view>
				<view class="order-total">共{{item.totalNum}}件商品，合计：{{item.totalPrice}}</view>
			</view>			
			
			<view class="time-text" >{{ item.djs&&item.status==='待支付' ? '支付时间剩余'+item.djs : '' }}</view>
			<view class="btn" @click="againOrder" :data-item="item" :data-taptext="item.status==='待支付' ? '去支付':'再来一单'" >
				{{ item.status==='待支付' ? '去支付':'再来一单' }}
			</view>
			
		</view>
	</view>
</template>

<script>
	import { countDownFun } from '../../../common/times.js'
	
	export default {
		data() {
			return {
				orderData: [],
				page: 1,
				hasMore: true,
				openid: '',				
				timer: '' //用来清除定时器
			}
		},

		onLoad() {
			this.openid = uni.getStorageSync('openid')
		},
		
		onShow() {
			//每次显示页面都刷新数据
			this.orderData = []
			this.page = 1
			this.hasMore = true
			this.getData() //调用函数				
		},
		
		onHide(){
			//清除定时器,避免性能损耗
			clearInterval(this.timer) 
		},

		// ***上拉触底事件***
		onReachBottom: function() {
			if (this.hasMore) {
				this.getData() //调用函数				
			} else {
				uni.showToast({
					title: '没有更多数据了！',
					icon: 'none'
				})
			}
		},	

		methods: {
			//***获取订单数据***
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				//分页查询云数据						 
				uniCloud.database().collection('orders')
				.skip((this.page - 1) * 10) //跳过已经查询的记录数量
				.limit(10) //每次请求10条记录
				.where({openid: this.openid}) //只查询自己的订单
				.orderBy('orderTime', 'desc') //按订单时间倒序进行排序
				.get()
				.then(res =>{					
					this.orderData.push(...res.result.data) //云端返回的数据追加到 orderData
					this.page = this.page + 1 //页码加1
					if (res.result.data.length < 10) { //如果云端返回的数组长度小于10，说明没有更多数据了						
						this.hasMore = false
					} else {
						this.hasMore = true
					}
					
					this.theTimer(this.orderData) //调用倒计时函数
				})
				.catch(err =>{					
					console.log('查询失败', err)
				})
				.finally(() =>{
					//无论成功或失败都执行
					uni.hideLoading()
				})
			},

			//***再来一单***
			againOrder(e) {
				let taptext = e.currentTarget.dataset.taptext
				let againData = e.currentTarget.dataset.item.carData
				if (taptext==='再来一单'){
					//将数据存储在本地缓存指定的 key 中
					uni.setStorage({
						key: 'againData',
						data: againData
					})
					//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
					uni.switchTab({
						url: '../class/class'
					});
				} else {
					//跳转到支付页面
					uni.navigateTo({
						url: '../../second/pay/pay'
					});
				}
				
			},

			//***倒计时***			
			theTimer(dataArr) {				
				let timer = setInterval(() => {
					//遍历数组
					dataArr.forEach((item, index) => {
						//关键点，强制更新数组属性值并渲染到视图层	
						this.$set(item, 'djs', countDownFun(item.endTime))
						if(item.status==='待支付' && item.djs==='00分00秒'){
							this.$set(item,'status','已取消')
							//调用函数更新云数据
							this.upStatus(item.orderid)
						} 						
						
					})
				}, 1000)
				this.timer = timer
			},
			
			//***更新云数据***
			upStatus(orderid){
				uniCloud.database().collection('orders')
				.where({orderid: orderid}) //where与update的位置不能调换，否则报错
				.update({status: '已取消'})				
				.then(res => {
					console.log('更新成功', res)
				})
				.catch(err => {					
					console.log('更新失败', err)
				})
				
			}
			
			
			
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #efefef;
	}

	.box {
		width: 91%;
		/* height: 500rpx; */		
		/* margin: auto;*/		/*本元素水平居中*/
		margin: 15rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	.head {
		display: flex;
		justify-content: space-between;
		height: 50rpx;
		line-height: 50rpx;
		border-bottom: solid #f4f4f4 1px;
	}

	.order-no {
		font-size: 24rpx;
		color: #868686;
	}

	.row {
		display: flex;
		margin: 20rpx 0rpx;
		justify-content: space-between;
	}

	.row-left {
		display: flex;
	}

	.row-img {
		width: 100rpx;
		height: 100rpx;
	}

	.row-name {
		margin-top: 10%;
	}

	.row-num {
		height: 100rpx;
		line-height: 100rpx;
		color: #868686;
		font-size: 26rpx;
	}

	.foot {
		display: flex;
		justify-content: space-between; /*两端对齐*/
		height: 70rpx;
		line-height: 70rpx;
		border-top: dashed #f4f4f4 1px;
	}

	.order-time {
		font-size: 24rpx;
		color: #868686;
	}

	.order-total {
		font-size: 24rpx;
	}	

	.time-text{
		height: 40rpx;
		line-height: 40rpx;
		font-size: 26rpx;
		color: #ff0000;
	}
	.btn {
		width: 120rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 26rpx;
		color: #A7D500;
		border-radius: 50rpx;
		border: solid #A7D500 1px;
		position: relative; /*相对定位*/
		left: 80%;
		top: -34rpx;
		/*相对定位，向上移动100rpx后，底部还保留着100rpx的占位空间，用margin-bottom来消除占位*/
		margin-bottom: -15px;
	}
</style>