uniapp 小程序上下划屏切换视频

效果图：

代码：

<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" @change="changefun" @animationfinish="animationfinishfun" :current="0" :circular="true" :vertical="true">
                        <swiper-item v-for="(item,index) in videoData" :key="index">
                            <view class="swiper-item uni-bg-red" >
                                <video class="video" :id="'id'+index" :src="item.fileID"  @longpress="longpress"
                                   :controls="true"  :custom-cache="false" :loop="false" :enable-play-gesture="true" :enable-progress-gesture="true"  :show-center-play-btn="true">
                                </video>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
		<!--弹窗-->
		<modal v-if="showPop" title="请输入管理员密码" confirm-text="确定" cancel-text="取消" @cancel="cancelPop" @confirm="confirmPop"> 
			<input type='password' placeholder="请输入密码" v-model="contentPop" />
		</modal>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                videoData: [],  //视频地址
                index_: 1,  //控制非当前页面暂停播放
				showPop:false, //弹窗
				contentPop:'',
            }
        },
		
		onLoad() {
			wx.cloud.callFunction({  //调用云函数
				name:'selectVideo',  //云函数名称
				data:{  //以下是云函数需要传入的参数					
					filter:{}          //筛选条件
				},
				success: (res) => {	
					var arr = res.result.data  //云端返回的数组
					this.videoData = foo(arr) //打乱数组排序
					function foo(arr) {  //洗牌算法函数
						var cloneArr = arr.concat()
						var len = cloneArr.length
						for(var i=0; i<len; i++){
							var index = Math.floor(Math.random() * cloneArr.length)
							var temp = cloneArr[index]
							cloneArr[index] = cloneArr[i]
							cloneArr[i] = temp
						}
						return cloneArr
					}
				},
				fail:(e) => {
					console.log(e)
				}
			})
		},

        methods: {
			//滑块的索引改变时触发 change 事件
            changefun(e) {
                let videoContext = uni.createVideoContext('id' + this.index_)
                videoContext.pause()                
            },
			
			//动画结束时会触发事件
            animationfinishfun(e) {
                let {  //批量赋值 ，等于 index_ = this.index_
                    index_,                    
                    videoData,            
                } = this
				
                let current = e.detail.current  //当前滑块的索引			
				uni.setStorageSync('_id',videoData[current]._id)
				uni.setStorageSync('fileID',videoData[current].fileID)
				uni.setStorageSync('videoIndex',current) 
				
				//创建并返回 video 上下文 videoContext 对象 -- uni.createVideoContext(videoId, this) 
                let videoContext = uni.createVideoContext('id' + index_)  //此处videoId是变量形式
                videoContext.pause()  //非当前页面暂停播放
			
                videoContext = uni.createVideoContext('id' + current)
                videoContext.play()  //播放	
				
				this.index_ = current  //控制非当前页面暂停播放
            },
			
			//长按事件
			longpress() {
				this.showPop = true  //显示弹窗
			},
			
			//弹窗
			confirmPop() { //确认
				if(this.contentPop == '88888888') {
					let id = uni.getStorageSync('_id')
					let fileID = uni.getStorageSync('fileID')
					let videoIndex = uni.getStorageSync('videoIndex')
					uni.showModal({
						title: '注意了',
						content: '确认要删除吗？',
						success: (res) => {
							if (res.confirm) {										
								this.videoData.splice(videoIndex, 1)  //删除数组中的值
								//删除数据库中的记录								
								wx.cloud.callFunction({
									name: 'deleteVideo',  // 云函数名称				
									data: {  // 传给云函数的参数
										id: id
									},
									success: (res) => {
										console.log('删除记录成功:', res)
									},
									fail: (err) => {
										console.log('出错了:' , err)
									}
								})
								//删除云存储中的文件
								wx.cloud.deleteFile({
									fileList:[fileID],
									success(res){
										console.log('删除文件成功',res)
									},
									fail(err){
										console.log(err)
									}
								})
							}else{
								console.log('点击了取消')
							}
						}
					})					
					this.contentPop = ''  //清空输入框
					this.showPop = false  //隐藏弹窗
				} else {
					uni.showToast({
						title: '密码错误！',
						icon: 'none',
						duration: 1000
					})
				}
			},
			cancelPop() {  //取消
				this.contentPop = ''
				this.showPop = false			  
			},
        }
		
    }
</script>

<style scoped lang="less">
	.swiper {
	    height: 100vh;
	    .swiper-item {
	        height: 100vh;
	        position: relative;
	    }
	    .uni-bg-red {
	        background: red;
	    }
	    .uni-bg-green {
	        background: green;
	    }
	    .uni-bg-blue {
	        background: blue;
	    }
	}
	
	.video {
	    width: 100%;
	    height: 100vh;
	    position: relative;
	}	
	
</style>

注：经过测试，视频数量超过15条，后面的不能播放，只有黑屏。原因是video组件过多导致。完美的替代方案详见https://blog.csdn.net/weixin_38946164/article/details/112648615