swiper的運用

2023年2月4日 135次阅读 来源: 蔣個笑話吧

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞