uni-app swiper里包含video,滑动不流畅问题的解决方案
场景:轮播里要有图片还要有视频,轮播用的是swiper,视频播放用的是video。滑起来卡的不要不要的。解决的想法:第一步:一进入swiper自动轮播this.autoPlay=true ,视频video上面覆盖一层,再cover-view放个播放按钮,不显示video的播放按钮:show-center-play-btn=“false”,不显示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.stopTouchMove = 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>
然后滑动流畅得不要不要得。
更多推荐
所有评论(0)