swiper插件 點擊事件 的坑

需求：我需要做的東西是，下面輪播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',
                    },
                
                })