swiper在vue項目中的循環輪播bug以及點擊事件

　　一般的，如果是靜態數據（本地數據），可以直接在mounted生命周期中初始化，循環輪播、自動播放都比較正常。

　　但是，如果是動態從后台獲取數據的話，采用上述方法會發現，輪播圖無法自動播放，也無法拖拽。

　　解決辦法：在從后台獲取完數據之后再初始化swiper，同時啟動動態檢查器observer，當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper，默認是false。這時候使用autoplay開啟自動播放是可以的，

 

　　然而當加上loop讓其循環播放時，會發現是有問題的。如果不要循環播放的話，上述方法勉強可行，但是如果想要自動播放與循環輪播同時生效的話，還得另尋他法。

　　解決方法：在獲取完數據后，將swiper放在$nextTick下一個UI幀再初始化。

this.$nextTick(() => { // 下一個UI幀再初始化swiper
    this.initSwiper();
});

 

　　然后在initSwiper方法中，完成swiper初始化，如：

initSwiper () {
    const _this = this
    var mySwiper = new Swiper ('.swiper-container1', {
        loop: true,
        autoplay:true,
        observer:true,
        observeParents:true,//修改swiper的父元素時，自動初始化swiper
        autoplay: {
        　　disableOnInteraction: false,   // 手動滑動后繼續自動播放
    　　 },
        // 如果需要分頁器
        pagination: {
         el: '.swiper-pagination',
        }
    })
}                    

　　可以發現，現在這樣是可以了，能夠自動播放，也能循環播放，手指滑動后還能繼續自動播放。

　　然而，如果我想點擊banner，根據不同路徑跳轉到不同的頁面，這個該怎么實現呢？第一想法肯定是在swiper-slide上綁定click事件，通過click事件獲取跳轉路徑的同時完成頁面跳轉，本來是沒啥大問題的，但是在循環輪播的情況下，第一次播放完畢，進行第二次播放的時候，點擊第一個banner，會發現並沒有獲取到跳轉路徑，也就是說點擊事件失效了。

　　查找了下問題所在，發現在 loop 開啟的時候，dom 綁定事件是有問題的。因為在loop模式下slides前后會復制若干個slide，從而形成一個環路，但是卻不會復制綁定在dom上的click事件。

　　這時候我想到了swiper中的回調函數，click事件，那么上面的initSwiper事件就成這樣了。

initSwiper () {
    const _this = this
    var mySwiper = new Swiper ('.swiper-container1', {
        loop: true,
        autoplay:true,
        on:{
        click: function(e){
        let url = e.target.dataset.jumpurl // jumpurl是在swiper-slide中動態綁定的data-jumpUrl屬性，值是從后台獲取的跳轉鏈接
        _this.bannerJump(url)
        },
    },
    observer:true,
    observeParents:true,//修改swiper的父元素時，自動初始化swiper
    autoplay: {
        disableOnInteraction: false,
    },
        // 如果需要分頁器
    pagination: {
        el: '.swiper-pagination',
    }
    })
}

　　然后添加bannerJump事件：

bannerJump (url) {
    window.location.href = url    
}

　　到這里，一個自動播放、循環輪播、點擊跳轉的banner就大功告成了。