uniapp 小程序云开发video列表播放与动态加载更多数据

ll效果图：

代码：

<template>
	<view>
		<view class="videoBox">
			<block v-for="(item,index) in videoList" :key="index">
				<view class="videoItem">				
					<view> 视频：{{index + 1}} </view>					
					<block v-if= "item._id == vid" >  <!-- 只加载点击播放的视频 -->
						<video  id="videoId"  :src="item.fileID" autoplay="true" > </video>
					</block>					
					<block v-else>
						<view class="videoPoster" :data-vid="item._id" @tap="playing">
							<image class="posterImg" src="../../static/media.jpg" mode="aspectFill"></image>  <!-- 封面图 -->
							<image class="playBtn" src="../../static/Play.png" mode="aspectFill"></image>  <!-- 播放按钮 -->
						</view>
					</block>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoList: [],  //视频数据
				pageIndex: 1 ,  //第几页
				hasMore:false , //是否有更多数据
				vid:'' ,
			}
		},
		
		onLoad() {
			this.getData()  //调用函数
		},
		
		// 上拉触底事件
		onReachBottom:function( ) { 
			if (this.hasMore) {
				this.getData()  //调用函数
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 1000);				
			} else {
				uni.showToast({
				  title: '没有更多数据了！',
				  icon:'none'
				})
			}      
		},
		
		methods: {			
			//加载数据
			getData() {
				wx.cloud.callFunction({  //调用云函数
					name:'selectVideo',  //云函数名称
					data:{  //以下是云函数需要传入的参数					
						filter:{},          //筛选条件
						pageIndex: this.pageIndex,  //第几页
						pageSize: 10        //每次加载的记录数量
					},
					success: (res) => {	
						//this.videoData = this.videoData.concat(res.result.data)  //concat返回追加后的副本，并不会修改原有数组,多次追加后会产生许多副本，浪费内存
						this.videoList.push(...res.result.data)  //云端返回的查询数据,追加到数组  // push改变原数组,节约内存 
											
						this.hasMore = res.result.hasMore  //云端返回的是否有更多数据
						if (this.hasMore) {
							this.pageIndex = this.pageIndex + 1
						}
					},
					fail:(e) => {
						console.log(e)
					}
				})
			},			

			playing(e) {				
				var vid = e.currentTarget.dataset.vid
				//console.log(vid)
				this.vid = vid
			}			
		}
	}
</script>

<style>
	.videoItem{
		margin-bottom: 20rpx;
		padding: 30rpx;
	}
	
	video{
		width: 100%;
		height: 450rpx;
	}
	
	.videoPoster{
		width: 100%;
		height: 450rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #333333;
		text-align: center;
		position: relative;
	}
	
	.posterImg{
		width: 100%;
		height: 100%;
	}
	.playBtn{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		z-index: 1000;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

</style>

云函数selectVideo：

// 云函数入口文件
const cloud = require('./node_modules/wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
    var filter = event.filter ? event.filter : {} ;  //筛选条件，默认为空，格式 {key:'values'}
	var pageIndex = event.pageIndex ? event.pageIndex : 1 ;  //当前第几页，默认为第一页
	var pageSize = event.pageSize ? event.pageSize : 6 ;  //每页取多少条记录，默认为6条  

	const countResult = await db.collection('video_base').where(filter).count()  //获取集合中的总记录数
	const total = countResult.total  //得到总记录数 
	const totalPage = Math.ceil(total / pageSize)  //计算页数  // ceil 向上取整
 // const skipNum = Math.round(Math.random() * totalPage)     // 获取从 1 到 totalPage 的随机整数  详细：https://www.runoob.com/w3cnote/js-random.html
	
	var hasMore ;  //提示前端是否还有数据
	if (pageIndex > totalPage || pageIndex == totalPage) {  //如果没有数据了，就返回false
		hasMore = false 
	} else {
		hasMore = true 
  }

  //查询数据并返回给前端
  return await db.collection('video_base')
  .where(filter)
  .skip((pageIndex - 1) * pageSize)
  .limit(pageSize)
  .orderBy('createTime','desc')
  .get()
  .then( res => {
			res.hasMore = hasMore ;
			return res ;  // 返回json给客户端
	})    
}