swiper的使用 | 易学教程

swipe是一款轮播图插件，我是用在vue里面，方便省事儿。
swipe里面有很多关于滑动的组建，我只用过轮播图，如果以后有时间，可以再看看官网上别的组件介绍。
官网地址

安装：

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>

来源：https://www.cnblogs.com/jlfw/p/11939741.html

标签

swipe

广告条

轮播