功能点： 上下滑动切换视频；tab标签切换分类

<template>
	<view class="app">
		<view class="header">
			<view class="back"></view>
			<van-tabs v-model="activeName" @click="onClick" style="width: 60%;background: rgba(255,255,255,0);">
				<van-tab title="南山" name="a">
					<swiper
						class="swiper"
						:current="current"
						:indicator-dots="indicatorDots"
						:circular="circular"
						:duration="duration"
						:vertical="vertical"
						style="height: 100%;"
						@change="swiperChange"
					>
						<block v-for="(item, index) in vlist" :key="index">
							<swiper-item>
								<view class="uni_vdplayer">
									<!-- controls:是否显示默认播放控件（播放/暂停按钮、播放进度、时间）,loop:是否循环播放，show-center-play-btn：是否显示视频中间的播放按钮，object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 -->
									<video
										:id="'myVideoa' + index"
										:ref="'myVideoa' + index"
										class="player-video"
										:src="item.src"
										:controls="true"
										:loop="true"
										:show-center-play-btn="false"
										objectFit="contain"
									></video>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</van-tab>
				<van-tab title="关注" name="b">
					<swiper
						class="swiper"
						:current="current2"
						:indicator-dots="indicatorDots"
						:circular="circular"
						:duration="duration"
						:vertical="vertical"
						style="height: 100%;"
						@change="swiperChange2"
					>
						<block v-for="(item, index) in vlist2" :key="index">
							<swiper-item>
								<view class="uni_vdplayer">
									<!-- controls:是否显示默认播放控件（播放/暂停按钮、播放进度、时间）,loop:是否循环播放，show-center-play-btn：是否显示视频中间的播放按钮，object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 -->
									<video
										:id="'myVideob' + index"
										:ref="'myVideob' + index"
										class="player-video"
										:src="item.src"
										:controls="true"
										:loop="true"
										:show-center-play-btn="false"
										objectFit="contain"
									></video>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</van-tab>
				<van-tab title="推荐" name="c">
					<swiper
						class="swiper"
						:current="current3"
						:indicator-dots="indicatorDots"
						:circular="circular"
						:duration="duration"
						:vertical="vertical"
						style="height: 100%;"
						@change="swiperChange3"
					>
						<block v-for="(item, index) in vlist3" :key="index">
							<swiper-item>
								<view class="uni_vdplayer">
									<!-- controls:是否显示默认播放控件（播放/暂停按钮、播放进度、时间）,loop:是否循环播放，show-center-play-btn：是否显示视频中间的播放按钮，object-fit：当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖 -->
									<video
										:id="'myVideoc' + index"
										:ref="'myVideoc' + index"
										class="player-video"
										:src="item.src"
										:controls="true"
										:loop="true"
										:show-center-play-btn="false"
										objectFit="fill"
									></video>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current:0,
			current2:0,
			current3:0,
			activeName: 'c', //tab标签页
			player: null, //视频对象
			indicatorDots: false, //显示面板指示点
			duration: 200, //滑动动画时长
			circular: true, //是否衔接滑动
			vertical: true, //是否纵向滑动
			vlist: [
				{ src: '../../../static/video/video1.mp4' },
				{ src: '../../../static/video/晴天.mp4' },
				{ src: '../../../static/video/city.mp4' },
				{ src: '../../../static/video/sky.mp4' },
				{ src: '../../../static/video/panda.mp4' },
				{ src: '../../../static/video/lol.mp4' }
			],
			vlist2: [
				{ src: '../../../static/video/city.mp4' },
				{ src: '../../../static/video/panda.mp4' },
				{ src: '../../../static/video/video1.mp4' },
				{ src: '../../../static/video/晴天.mp4' },
				
				{ src: '../../../static/video/sky.mp4' },
				
				{ src: '../../../static/video/lol.mp4' }
			],
			vlist3: [
				{ src: '../../../static/video/lol.mp4' },
				{ src: '../../../static/video/city.mp4' },
				{ src: '../../../static/video/sky.mp4' },
				{ src: '../../../static/video/panda.mp4' },
				{ src: '../../../static/video/video1.mp4' },
				{ src: '../../../static/video/晴天.mp4' },
				
				
				
				
			]
		};
	},
	onShow() {
		let newVideo = uni.createVideoContext('myVideo0');
		if (!this.player) {
			this.player = newVideo;
			// this.player.pause();
			setTimeout(() => {
				this.player.play();
			}, 10);
			console.log(this.player + '播放');
			return;
		}
	},
	methods: {
		onClick(name){
			if(name=="a"&& this.current!= 0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ this.current)
				console.log(newVideo)
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}else if(name=="a"&& this.current== 0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ "0")
				console.log(newVideo)
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}
			if(name=="b"&&this.current2!=0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ this.current2)
				console.log(newVideo)
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}else if(name=="b"&&this.current2==0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ "0")
				console.log(newVideo)
				// newVideo.play()
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}
			if(name=="c"&&this.current3!=0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ this.current3)
				console.log(newVideo)
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}else if(name=="c"&&this.current3==0){
				this.player.pause()
				let newVideo=uni.createVideoContext('myVideo'+ name+ "0")
				console.log(newVideo)
				if (this.player.id !== newVideo.id) {
					// console.log("切换视频主体");
					newVideo.play();
					// console.log("目前视频主体播放");
					this.player.pause();
					this.player.seek(0); //滑动视频从头播放
					// console.log("之前视频主体暂停");
					this.player = newVideo;
					// console.log("播放主体切换");
				}
			}
		},
		//控制播放 source 字段，表示导致变更的原因
		swiperChange(current, source) {
			// console.log(current)
			this.current=current.target.current
			let newVideo = uni.createVideoContext('myVideo'+this.activeName + current.target.current);
			if (!this.player) {
				this.player = newVideo;
				this.player.play();
				console.log(JSON.stringify(this.player) + '播放');
				return;
			}
			// console.log(this.player.id)
			if (this.player.id !== newVideo.id) {
				// console.log("切换视频主体");
				newVideo.play();
				// console.log("目前视频主体播放");
				this.player.pause();
				this.player.seek(0); //滑动视频从头播放
				// console.log("之前视频主体暂停");
				this.player = newVideo;
				// console.log("播放主体切换");
			}
		},
		swiperChange2(current, source) {
			// console.log(current)
			this.current2=current.target.current
			let newVideo = uni.createVideoContext('myVideo'+this.activeName + current.target.current);
			if (!this.player) {
				this.player = newVideo;
				this.player.play();
				console.log(JSON.stringify(this.player) + '播放');
				return;
			}
			// console.log(this.player.id)
			if (this.player.id !== newVideo.id) {
				// console.log("切换视频主体");
				newVideo.play();
				// console.log("目前视频主体播放");
				this.player.pause();
				this.player.seek(0); //滑动视频从头播放
				// console.log("之前视频主体暂停");
				this.player = newVideo;
				// console.log("播放主体切换");
			}
		},
		swiperChange3(current, source) {
			// console.log(current)
			this.current3=current.target.current
			let newVideo = uni.createVideoContext('myVideo'+this.activeName + current.target.current);
			if (!this.player) {
				this.player = newVideo;
				this.player.play();
				console.log(JSON.stringify(this.player) + '播放');
				return;
			}
			// console.log(this.player.id)
			if (this.player.id !== newVideo.id) {
				// console.log("切换视频主体");
				newVideo.play();
				// console.log("目前视频主体播放");
				this.player.pause();
				this.player.seek(0); //滑动视频从头播放
				// console.log("之前视频主体暂停");
				this.player = newVideo;
				// console.log("播放主体切换");
			}
		}
	}
};
</script>

<style>
page {
	height: 100%;
}
.app {
	position: relative;
	width: 100%;
	display: block;
	height: 100%;
}
/* 头部 */
.header {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80upx;
	z-index: 100;
	justify-content: center;
	align-items: center;
	color: #ffffff;
}
.back {
	position: fixed;
	left: 0;
	top: 0;
	width: 80upx;
	height: 80upx;
	line-height: 80upx;
}
/* 播放器 */
.uni_vdplayer {
	height: 100%;
}
.player-video {
	width: 100%;
	height: 100%;
}
//更改vant tab组件的样式
.van-tabs__nav{
		background: transparent!important;
}
.van-tabs__wrap{
	height: 106upx!important;
	line-height: 106upx!important;
}
.van-tab{
	color: #FFFFFF !important;
	font-size: 36upx!important;
	line-height: 100upx!important;
}
.van-tabs__line {
	background-color: #F1F1F1!important;
}
.van-tab__text--ellipsis{
	display: block!important;
	height: 100upx!important;
	margin-top: 50upx!important;
}
.van-tabs__content{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.van-tab__pane{
	height: 100%;
}
</style>