Vue如何使用vue-awesome-swiper實現輪播效果

        在Vue項目中如何實現輪播圖的效果呢，在傳統項目中第一個想到的一般都是swiper插件，代碼簡單好用。一開始我也是直接npm安裝swiper然后照着之前的傳統寫法寫，然而卻沒有效果，只會顯示圖片但沒有輪播效果。上網查了很多資料也參考其他同行的做法，跟着改但是還是沒效果。后來發現vue是有一個專門的輪播插件：vue-awesome-swiper，下面介紹如何用這個插件實現輪播效果：

        1.安裝vue-awesome-swiper插件，具體安裝方法請點擊這里： vue-awesome-swiper安裝方法。

        2.在main.js中引入這個插件：

 

        3.用swiper，swiperSlide組件寫template模板：

 

        我是用v-for遍歷data里的數組來形成輪播圖的，也可以不使用v-for直接寫多個swiper-slide組件。如果使用遍歷的方法需要注意的是必須要加上:key="item.id"，否則會報錯。（PS：如何在data中正確引入圖片路徑在我上一篇博文中有詳細敘述， 點擊查看）

        4.這一步是最重要的，設置輪播的初始化，我只寫了基本的常用swiper輪播屬性，有特殊需求的可以去 swiper中文網看具體的api，在這一步已經實現了基本的輪播效果，但是頁面樣式會讓你皺眉，很多網上的教程在這一步就止步了，然后你會發現頁面上的輪播圖是一大塊的，輪播一下就看到空白，這是因為沒有引入vue-awesome-swiper的樣式，有的朋友說npm安裝vue-awesome-swiper時會有兩個文件夾，一個是vue-awesome-swiper文件夾，一個是swiper文件夾。而我安裝時只有一個vue-awesome-swiper文件夾，所以我是再npm安裝swiper，然后直接import引入swiper.css，即在下面截圖第17行處換行寫import 'swiper/dist/css/swiper.css';，
如果覺得這樣路徑太麻煩，可以將swiper.css復制到static文件夾再引入，具體script如下圖所示：

 

 

        到了這里實現輪播效果已經成功，但是你鼠標操作是沒有效果的，如果需要鼠標移上停止輪播，鼠標移出繼續輪播，那么請繼續往下看。

        5.我們在用jq或angular寫輪播插件都知道必須要實例化swiper，在vue中操作swiper對象也是一樣：

 

        注意：實例化swiper的時候data里的swiperOption對象里notNextTick必須為true,否則是會出錯的，另外我們的鼠標移上移出事件是寫在swiper-slide組件上的，正常寫法是不起作用的，需要加上.native才能生效，具體原因在vue官網上有說明。

        這個輪播效果是我親測有效才發出來的，希望對大家有幫助。

 

 

     如需轉載請注明出處： http://www.cnblogs.com/zishang91/p/7600006.html，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！