建立vue專案流程這裡就不用廢話了吧？還不知道就在我前幾篇中有寫。

今天我們的大屏專案中有了一個新的需求，資料模組的切換，毫無疑問，swiper外掛不二之選。原生的寫法官網直接給了，那麼這裡介紹一下在vue中使用swiper外掛的方法。

<link rel="stylesheet" href="./static/swiper-4.3.3.min.css">     在index.html中引入swiper的css檔案

在你想使用的元件中引用swiper，也可以在main.js中全域性引用，我這裡直接在元件中用了

import Swiper from '../../static/swiper-4.3.3.min'
 

HTML部分，寫在<template>標籤裡

</div><div class="swiper-container">
    <div class="swiper-wrapper">
         <div class="swiper-slide"><Food/></div>
         <div class="swiper-slide"><Food/></div>
         <div class="swiper-slide"><Food/></div>
   </div>
</div>
 

元件js部分

    mounted(){
      this.mySwiper()        //這裡要呼叫methods中的方法，一定記得呼叫
    },
    methods:{
      mySwiper(){
        let mySwiper=new Swiper ('.swiper-container', {
          direction: 'vertical',    //翻轉方向
          loop: true,
          autoplay:{      //自動播放，裡面有很多引數可以根據需求進行除錯
            delay:5000,
          },
          effect : 'coverflow',   //翻轉方式
         })
      }
    }
 

然後就可以看到效果啦！

其實，swiper非常的好用，現在大部分的輪播效果都用這個外掛吧，另外在移動端的使用好像更為廣泛，官方上的介紹非常詳細，還有API文件寫的也很詳細，可以根據需求慢慢除錯你想要的效果。還是很好玩的。