swiper縮圖報錯,動態獲取圖片載入失敗
阿新 • • 發佈:2018-11-30
- swiper縮圖展示的時候必須要保證全部dom掛在完畢,
$nextTick
就是保證在所有圖片載入完畢之後執行的函式 - 當swiper需要展示的圖片數量小於3個時,就會出現各種奇妙的錯誤,為解決這個問題需要在初始化swiper的時候加上
watchOverflow: true
,同時官網文件要求loop:false
;雖然loop為false,但是實現的是依舊迴圈的效果 - 以下程式碼可以寫在獲取完資料之後執行此函式
this.$nextTick(()=>{ var galleryThumbs = new Swiper(".gallery-thumbs", { spaceBetween: 10, slidesPerView: 2, loop: false, freeMode: true, loopedSlides:2, //looped slides should be the same watchSlidesVisibility: true, watchSlidesProgress: true, watchOverflow: true }); var galleryTop = new Swiper(".gallery-top", { spaceBetween: 10, loop: true, loopedSlides:2, //looped slides should be the same navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, thumbs: { swiper: galleryThumbs }, watchOverflow: false }); });