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>