swiper的使用

swipe是一款輪播圖插件，我是用在vue裏面，方便省事兒。
swipe裏面有不少關於滑動的組建，我只用過輪播圖，若是之後有時間，能夠再看看官網上別的組件介紹。
官網地址

github地址

安裝：

npm install vue-swipe

安裝完成以後，我沒有在main.js中註冊它，而是在使用頁面註冊的。由於一般來講輪播圖只會在一個應用的首頁展現，因此就不必在全局註冊它，只用在index.vue頁面註冊使用一下就能夠了。

如何使用：

//html

<swipe class="carousel-figure">
    <swipe-item class="slide1">1</swipe-item>
    <swipe-item class="slide2">2</swipe-item>
    <swipe-item class="slide3">3</swipe-item>
</swipe>

//js

//頂部引用
import { Swipe, SwipeItem } from 'vue-swipe'
import 'vue-swipe/dist/vue-swipe.css';

//註冊局部組建
components: {
    Swipe,SwipeItem
}

//css

.carousel-figure {
    height: 150px;   //必須得給個高度，否則高度是0，啥都不顯示
    .slide1 {
        background-color: blue;    
    }
    .slide2 {
        background-color: gold;
    }
    .slide3 {
        background-color: green;
    }
}

注意：其實首頁輪播圖我更常常用循環的方式寫出來，這是項目中的代碼：

//循環的時候必須綁定key，不然會出錯
<swipe class="carousel-figure">
    <swipe-item v-for="banner in bannerList" :key="banner.bId" class="slide">
        <img :src="banner.url" @click="testDetail(banner.title,banner.linkUrl)">
    </swipe-item>
</swipe>