使用 vue-awesome-swiper
(v3.1.3) 做了一个轮播图片,需要实现的功能,遇到了如下问题:
1、滑动视频和图片都可以切换(如果只是图片没问题,但是视频在暂停状态下却无法滑动?)
2、轮播图正方形,但是视频是长方形,默认视频一直顶部对其,怎么让视频垂直居中对其呢?
swiper组件(基于vue-awesome-swiper
(v3.1.3) 封装):
<template>
<div class="wrapper">
<swiper ref="mySwiper" :options="swiperOption" v-if="list.length > 0">
<swiper-slide v-for="(item, idx) in list" :key="idx">
<img v-if="item.mediaType == 'img'" class="swiper-img" :src="item.src" alt="">
<video ref="myvideo" name='myvideo' v-if="item.mediaType == 'video'" :src="item.src" controls="controls" :poster="item.poster"></video>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'DetailSwiper',
props:{
list: Array
},
watch: {
currentIdx (newval, oldval) {
let videoList = $('.wrapper video').toArray()
if(videoList.length > 0){
if(videoList.some(item => !item.paused) && videoList.some(item => !item.ended)){
videoList.forEach(element => {
element.pause()
element.currentTime=0
});
}
}
}
},
data(){
let self = this;
return {
currentIdx: 0,
swiperOption: {
//页码
pagination: '.swiper-pagination',
// autoplay: 3000,
loop: true,
paginationClickable: true,
on:{
transitionEnd: function() {
self.currentIdx = this.realIndex
// console.log(self.currentIdx)
}
},
},
}
},
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background: #fff
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 100%
background: #eee
.swiper-img
width: 100%
</style>
楼主解决了吗?我也遇到了同样的问题,swiper中的视频不能滑动。