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 ，写下来只是方便自己查询与记录。