需求:我需要做的东西是,下面轮播6个视频,点击视频,上面大视频播放对应的内容
遇到的坑:当时是只并排显示3个,6个视频循环第一遍的时候点击事件都正常,但是第二遍的1,2,3点击事件失效,4,5,6正常
尝试了很多版本的swiper(3版本,4版本,vue-awesome-swiper:3.1.1)都有这种现象
有两个解决方案:
一:关掉swiper的环路属性(loop:false),这样一直都是正常的
二:点击事件,用原生js写
/** * 给视频添加点击事件 */ addEventClickToVideo(){ const newSwiper = document.getElementById("swiper") const item = newSwiper.getElementsByClassName('swiper-video') item.forEach((element,index) => { element.onclick = ($event)=>{ console.log($event) console.log($event.currentTarget.dataset.url); // $event.currentTarget 获取到的是上一层的元素 $event.arget 获取到的是本层的元素
const _url = $event.currentTarget.dataset.url // 知识点:此处获取的 url 是 html5中自定义属性data-*,比如此处的url, 是从该元素属性 date-url='' 获取的
const _cover = $event.currentTarget.dataset.cover
this.handleSwiperVideo(_url,_cover)
$event.preventDefault()
$event.stopPropagation();
}
});
}
new Swiper('.swiper-container', { autoplay:true, loop:true, slidesPerView:3, on:{ init:function(swiper){ _self.addEventClickToVideo() // 在swiper回调中调用点击事件 } }, // 左右按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, })