|
[多端开发]
动态控制swiper的autoplay属性
[复制链接]
需求:做一个视频的轮播(这个已经OK),现在是想点击播放视频通过autoplay属性来控制轮播图暂停,当点击暂停视频或视频播放完后继续轮播,给autoplay设置了动态值但好像没有生效
相关代码:
<swiper class="swiper" circular :autoplay='topPlayShow'>
<swiper-item class="swiper-item" v-for="(_item,_index) in dataList">
<video class="video" id={"video"+_index} @click="topstop(_index)" onplay={this.onplay}
src={_item} poster={poster} controls="false" loop muted ontimeupdate={this.ontimeupdate}>
</video>
<img v-show="topPlayShow" class="topplay" @click="topPlay(_index)"
src="../../images/home/play@2x.png" alt="">
</swiper-item>
</swiper>
topPlay(i) {
var obj = document.getElementById('video' + i);
obj.play();
this.data.topPlayShow = false
this.data.setout=setTimeout(() => {
this.data.topPlayShow = true
}, this.data.duration)
},
ontimeupdate(e) {
this.data.duration = e.detail.duration*1000;
console.log(duration);
},
topstop(i) {
clearTimeout(this.data.setout)
var obj = document.getElementById('video' + i);
obj.pause()
this.data.topPlayShow = true
}
|
|