swiper的使用

2024年4月4日 175次阅读 来源: 蒋个笑话吧

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>
    原文作者：蒋个笑话吧
    原文地址: https://segmentfault.com/a/1190000014430525
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞