vue-swiper
- 基於 Vue2.0 開發，基本滿足大部分功能
- 輕量、高性能輪播插件。目前支持 無縫銜接自動輪播、無限輪播、手勢輪播
- 沒有引入第三方庫，原生 js 封裝,打包之后只有 8.2KB 大小 性能還是杠杠滴
demo
🎉 覺得好用給一個 star 哦~ 🎉
github傳送門
Install
npm i vue-swiper-component --save
cnpm i vue-swiper-component --save //國內鏡像
Usage
import { Swiper, Slide } from 'vue-swiper-component';
components: {
Swiper,
Slide
}
//異步加載輪播圖的情況
<Swiper v-if="list.length > 0">
<Slide v-for="(item,index) in list" :key="index">
</Slide>
</Swiper>
//同步加載輪播圖情況
<Swiper>
<Slide>
1
</Slide>
<Slide>
2
</Slide>
<Slide>
3
</Slide>
</Swiper>
//加一些參數配置情況
<Swiper v-if="slidesReal.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
<Slide @click="clickMe" v-for="(item,index) in slidesReal" :key="index">
//添加click事件
</Slide>
</Swiper>
API
| 屬性 | 說明 | 默認 |
|---|---|---|
| autoPlay | 是否自動輪播 | true |
| showIndicator | 是否顯示輪播的那個點 | true |
| interval | 每兩次隔多久滾動一次 | 2500 |
| duration | 每次滾動一頁需要多久時間 | 500 |
✅ Swiper 上面還暴露了其他方法,在 Swiper 標簽上添加 ref 屬性, 例如: <Swiper ref="swiper"></Swiper>
✅ this.$refs.swiper.prevSlide(); // 上一張圖
✅ this.$refs.swiper.nextSlide(); // 下一張圖
✅ this.$refs.swiper.slideTo(2); //某一張圖
事件
transtionend 事件 每次輪播出發 參數表示輪播到第幾個圖片 在Swiper上添加
// @transtionend="getNum" getNum(data) {console.log(data);}
click 事件 每個輪播圖上的事件
Other
- 可以通過覆蓋我的樣式進行自定義樣式，Slide 標簽里面可以寫 div 或者其他的東西
- 一些參數配置可以參考上面 Usage 第三個示例，異步渲染要加 v-if 保證渲染成功 參考第一個示例
- 如果其他問題可以郵箱溝通，452216418@qq.com;
- 暫時對 PC 支持不是很友好，等以后有時間了可以加上;