uni-app swiper里包含video，滑動不流暢問題的解決方案

場景：輪播里要有圖片還要有視頻,輪播用的是swiper，視頻播放用的是video。滑起來卡的不要不要的。
解決的想法：video播放得時候禁止swiper滑動，vide不播放得時候上面覆蓋一層
實現步驟如下：
第一步：一進入swiper自動輪播this.autoPlay=true ，視頻video上面覆蓋一層，再cover-view放個播放按鈕，不顯示video的播放按鈕:show-center-play-btn=“false”，不顯示video的默認播放控件（播放/暫停按鈕、播放進度、時間）:controls=“controls” controls:false。

第二步：點擊cover-view的上面的播放按鈕，隱藏覆蓋層cover-view:this.isShow = false，顯示video的默認播放控件（播放/暫停按鈕、播放進度、時間）this.controls:true,禁止swiper滑動this.stopTouchMove = true，播放視頻 this.VideoContext.play()

plays(){
  this.controls = true;
  this.isShow = false;
  this.stopTounchMove = true;
  this.VideoContext.play()
}

第三步:監聽video得播放和暫停播放，結束播放

//當video播放得時候 覆蓋曾隱藏，不能滑動，不能輪播
playVideo() {
  this.isShow = false
  this.stopTouchMove = true
  this.autoPlay = false
},

//當video播放得時候 覆蓋曾隱藏，不能滑動，不能輪播
endVideo() {
  console.log("結束video")
  this.controls = false
  this.isShow = true
  this.stopTouchMove = false
  this.autoPlay = true
},

然后看下我的布局，為了看的比較清楚只顯示了重要的設置

<swiper  :disable-touch="stopTouchMove" :autoplay="autoPlay">
	  <swiper-item v-if="video!=null" >
			<view class="item">
				<video id="myVideo" 
							 ref="myVideo"
							 :controls="controls"  
							 :src="video" 
							 @play="playVideo()" 
							 @pause="endVideo(false)"     
							 @ended="endVideo()"
							 :show-center-play-btn="false">
				</video>
				<cover-view v-show="isShow"
										style="z-index:99;position: fixed;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
					<image @click="plays()" 
								 src="./play1.png" 
								 style="width: 40px;height: 40px;">
					</image>
				</cover-view>
			</view>
		</swiper-item>
		<swiper-item v-for="(item,index) in list" :key='index'>
			<view v-if="list && list.length>0">
				<image mode="heightFix" style="height: 200px" :src="item"></image>
			</view>
		</swiper-item>
	</swiper>

 文章非原創，轉載於 https://blog.csdn.net/qq_33333570/article/details/117330451 ，寫下來只是方便自己查詢與記錄。