偶遇vue-awesome-swiper的坑

最近用vue重構一個移動端的項目，碰到了不少坑，今天拿移動端最著名的輪播插件swiper為例來說，由於這個項目沒用UI庫，純手寫的樣式，沿用老的插件，自然而然的選擇了vue-awesome-swiper(3.1.3)最新版，記不清上次用這個插件多久了，現在用來竟遇到很多坑，今晚閑暇以此記錄，幫助大家避免踩坑。

1. 輪播圖不輪播

這個原因有很多，首先要檢查樣式swiper.css是否正確的引進來了，其次是最容易被忽略的也是這次最主要的原因，最新版的vue-awesome-swiper是基於swiper4，有很多配置option已經變了，最為明顯的就是原來的key-value格式autoplay: true,現在已經變成了下面這樣的json格式：

autoplay:{
    enabled: true,
    disableOnInteraction: false,
    delay: 3000
},
pagination: {
    el: '.pagination'
}

下圖為證：

官網上的圖
配置好以后應該是可以輪播了，還有就是SPA如果不是多個輪播的話沒必要全局引這個，

 

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);

只需要在封裝好的輪播組件內引入以下這個就夠了。

import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'

2. 分頁器pagination沒出現

這個的話其一就是因為上面提到的配置option格式變了，其二是需要在pagination 的div盒子里增加slot="pagination"用來分發，這兩個都沒問題的話應該就OK了。

3. 輪播第二次開始后第一張圖一閃而過

這個問題困擾了我好久，百度了很久也沒找到有用的線索，今天早上去了公司心里想這個問題必須解決啊，要不體驗也太差了，所以直接Google一下吧，第一個答案就是vue-awesome-swiper的GitHub上的issue，一看原來早已有人遇到了類似的問題，作者給出的解釋是由於vue特殊的渲染機制導致數據沒有完全返回時swiper已經初始化了，現在解決的方法是加v-if=“data.length”,保證數據完全返回了才開始渲染swiper，這樣總算是解決了，體驗馬上好極啦！之前由於英文不好所以一般有問題都是百度，最近發現同事有問題都是Google，今日一試果然是快准狠，以后要充分的利用好Google和StackOverFlow，提升效率不是一點半點哈！

4. resize()方法報錯undefined

這個問題也是因為swiper4已經把resize變為一個object，它包含兩個方法，我用了它的resizeHandler()方法，這樣就OK了。

技術在不斷進步，插件在不斷更新，以后遇到問題一定要先看原文檔，解決問題多借助Google！