你不知道的vue+vue-awesome-swiper的坑~

前言：

這兩天在寫vue的一個練習，其中一個模塊寫了輪播圖，說到輪播圖，確定不少人會想到用 swiper插件，不錯，vue中就有一個插件，叫vue-awesome-swiper，這個插件呢，我對他也不算陌生了，在這以前，我也用過兩次了，因此此次用的時候我也就信心滿滿，但是結果簡直讓我心痛~bug不斷，都讓我懷疑人生了，解決bug以後我就在想，以前多是運氣好吧，也就沒有踩坑。如今我就將我本身踩的坑分享給你們，但願你們避免入坑~（認真臉(#^.^#)）

介紹：

我這裏呢對vue-awesome-swiper就不作過多的介紹了，想了解的寶寶能夠直接去github上去搜，用法都有。這是github地址vue-awesome-swiper

如上圖，點擊進去以後，往下翻，找到readme，能夠在裏面看到用法~

坑~：

我遇到的第一個坑：

由於這個插件是swiper插件，因此我隨手給這個組件就命名爲Swiper了,而後在別的頁面引入這個組件的時候，就會報錯，以下：

當時我一臉懵X，渾然不知道發生了什麼，又回去把readme看了幾遍，發現本身用法沒錯呀。通過了若干個小時後。。。。。才解決了這個問題，我以爲是個人這個組件的名字與這個插件的名字命名衝突了（我的想法），我。。。。。。之後不再敢用這個名字了~

我遇到的第二個坑：

頁面正常渲染後，老是默認顯示最後一張圖片。一開始我也沒有在乎，想着給圖片換個位置就好了，別人又不知道真正的第一張實際應該展現什麼，很快，我就被本身的這個愚蠢想法打臉了，由於圖片下方的小圓點出賣了我，它也是在最後一個~個人代碼如圖：

後來我審查了元素，發現了其中的祕密。其實個人imgList裏面只有五張圖，可是由於這個輪播圖是無縫滾動，因此在渲染的時候會複製最後一張圖片放在第一張，複製第一張圖片放在最後一張。

解決辦法：咱們要經過v-if來進行判斷，在請求到數據後再加載swiper

疑惑：可是我仍是想不通沒有拿到數據就開始加載swiper怎麼就是顯示克隆的那個最後一張圖片，拿到數據開始加載，克隆的最後一張的圖片就不是最早顯示的了，中間的前後順序我仍是沒有搞清楚，但願有大神能指教一下。

總結：遇到問題不能隨他而去，仔細想一想琢磨一下仍是會有收穫的~