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>

總結

以上是生活随笔為你收集整理的swiper的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。