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，以便有錯誤能夠及時修改，如有錯漏不足之處，請見諒而且指點，謝謝！！！