uniapp 小程序云开发仿抖音滑屏切换与动态加载更多数据

效果图：

代码：

<template> 
    <view>
		<!--swiper实现整屏划动播放视频-->
		<swiper vertical duration="200" @change="changed" :style="{height: screenHeight-navBarHeight +'px'}">
		    <block v-for="(item,index) in videoData" :key="index">
				<swiper-item >
				    <video v-if="index==changeIndex" :src="item.fileID"   
						autoplay="true" controls="true"  custom-cache="false" loop="false" 
						enable-play-gesture="true" enable-progress-gesture="true" show-center-play-btn="true" >
					</video>
				</swiper-item>
		    </block>
		</swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {				
                videoData: [],  //视频数据                
				changeIndex: 0 , //控制video是否渲染
				hasMore:false , //是否有更多数据
				pageIndex: 1 ,  //第几页
				showPop:false, //弹窗
				contentPop:'', //弹窗内容
				screenHeight: 0 ,
				statusBarHeight: 0 ,
				navBarHeight: 0 ,				
            }
        },
		
		onLoad() {
			// 获取系统信息
			wx.getSystemInfo({
			  success: (res) => {
			    // 获取屏幕高度
			    this.screenHeight = res.screenHeight
			    // 获取状态栏高度
			    this.statusBarHeight = res.statusBarHeight
			    // 通过操作系统 确定自定义导航栏高度  
			    if (res.system.substring(0, 3) == "iOS") {
			      this.navBarHeight = 42
			    } else {
			      this.navBarHeight = 40
			    }
			  }
			})
			
			//调用函数加载数据
			this.getData()
		},

        methods: {			
			//划动切换
			changed(e) {
				let current = e.detail.current  //当前滑块的索引	
				this.changeIndex = current 	 
				
				if(this.videoData.length == current + 1) {  //当还有1个视频没有看的时候开始加载数据
					if (this.hasMore) {  //后台还有更多数据的时候
						this.getData()  //调用函数加载数据						
					} else {
						uni.showToast({
						  title: '没有更多数据了！',
						  icon:'none'
						})
					} 
				}
			},
			
			//加载数据
			getData() {
				wx.cloud.callFunction({  //调用云函数
					name:'selectVideo',  //云函数名称
					data:{  //以下是云函数需要传入的参数					
						filter:{},          //筛选条件
						pageIndex: this.pageIndex,  //第几页
						pageSize: 6        //每次加载的记录数量
					},
					success: (res) => {
						console.log(res)
						// concat返回追加后的副本，并不会修改原有数组,多次追加后会产生许多副本，浪费内存
						// this.videoData = this.videoData.concat(res.result.data)
					
						// 云端返回的查询数据,追加到数组  push改变原数组,节约内存
						this.videoData.push(...res.result.data) 
					
						// 云端返回的是否有更多数据
						this.hasMore = res.result.hasMore  
						if (this.hasMore) {
							this.pageIndex = this.pageIndex + 1
						}
					},
					fail:(e) => {
						console.log(e)
					}
				})
			}			

        }
		
    }
</script>


<style >
	swiper{
		width:100%;
		background:#000 
	}
	swiper-item{
		height:100%;
		width:100%
	}
	video{
		height:98%;
		width:100%
	}
</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 向上取整
	
	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给客户端
	})    
}