偶遇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！