【uniapp的swiper里 包含video】uniapp的swiper里 包含video，解决滑动不流畅问题

一、问题描述：

1.swiper轮播里既有图片还要有视频，视频播放用的是video。滑起来特别不流畅。
2.设置3秒自动轮播后，会出现正常看视频时 没等看完视频 3秒就自动切换了。

二、代码实现：

2.1

进入页面后，swiper自动轮播 this.autoPlay=true ，
视频video上面覆盖一层，在cover-view放个播放按钮，
不显示video的播放按钮 :show-center-play-btn=“false”
不显示video的默认播放控件（播放/暂停按钮、播放进度、时间）:controls=“controls” controls:false

2.2

点击cover-view的上面的播放按钮，隐藏覆盖层cover-view:this.isShow = false，
显示video的默认播放控件（播放/暂停按钮、播放进度、时间）this.controls:true
禁止swiper滑动 this.stopTouchMove = true，
播放视频 this.VideoContext.play()

<template>
	<!-- 1.轮播图布局-->
	<swiper class="swiper" circular="true" :autoplay="autoplay" 
	:interval="interval" indicator-dots="true"
	indicator-color='#c1e6f6' 
	indicator-active-color='#62c9f4'
	>
		<!-- 轮播图1-->
		<swiper-item @touchmove.stop="stopTouchMove">
			<video src="../../static/videos/01.mp4"
			poster="../../static/imgs/[email protected]"
			:show-center-play-btn="false" 
			:controls="controls" 
			@play="playVideo()" 
			@pause="endVideo(false)"
			@ended="endVideo()"></video>
			
			<cover-view v-show="isShow"
				style="z-index:99;position:fixed;width:100%;height:396rpx;border-radius: 10rpx;top:0;left:0;display:flex; justify-content:center; align-items:center;background-color: rgba(0, 0, 0, 0.5);">
						<image @click="plays()" src="../../static/imgs/bofang.png" style="width: 30px;height: 30px;"></image>
			</cover-view>
			
			<view class="infos">
				<view class="desc">在门房住了四年的母子，希望为热心邻居送点补给品</view>
				<view class="btn" @click="helpThemFun()">认领心愿</view>
			</view>
		</swiper-item>
		
		<!-- 轮播图2-->
		<swiper-item @touchmove.stop="stopTouchMove">
			<video src="../../static/videos/01.mp4"
			poster="../../static/imgs/[email protected]"
			:show-center-play-btn="false" 
			:controls="controls" 
			@play="playVideo()" 
			@pause="endVideo(false)"
			@ended="endVideo()"></video>
			
			<cover-view v-show="isShow"
				style="z-index:99;position:fixed;width:100%;height:396rpx;border-radius: 10rpx;top:0;left:0;display:flex; justify-content:center; align-items:center;background-color: rgba(0, 0, 0, 0.5);">
						<image @click="plays()" src="../../static/imgs/bofang.png" style="width: 30px;height: 30px;"></image>
			</cover-view>
			
			<view class="infos">
				<view class="desc">在门房住了四年的母子，希望为热心邻居送点补给品</view>
				<view class="btn" @click="helpThemFun()">认领心愿</view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
      
				//2.轮播图数据
				autoplay: true,
				interval: 3000,
				controls: false,
				isShow: true,
			}
		},
	
		methods: {
      
      
			//3.轮播图事件
			plays() {
      
      
				this.controls = true
				this.isShow = false
				this.stopTouchMove = true
				// this.VideoContext.play()
			},
			//video播放时，隐藏覆盖层，不能滑动，不能轮播
			playVideo() {
      
      
				this.isShow = false
				this.stopTouchMove = true
				this.autoplay = false
			},
			
			endVideo() {
      
      
				this.controls = false
				this.isShow = true
				this.stopTouchMove = false
				this.autoplay = true
			},
			
			//轮播禁止手动滑动
			stopTouchMove() {
      
      
				return false;
			},
		
		}
	}
</script>

完成 ending~