資訊專欄INFORMATION COLUMN
vue-swiper
基于 Vue2.0 開發(fā)，基本滿足大部分功能
輕量、高性能輪播插件。目前支持 無縫銜接自動輪播、無限輪播、手勢輪播
沒有引入第三方庫，原生 js 封裝,打包之后只有 8.2KB 大小 性能還是杠杠滴
demo? 覺得好用給一個 star 哦~ ?
github傳送門 Installnpm i vue-swiper-component --save cnpm i vue-swiper-component --save //國內(nèi)鏡像Usage
import { Swiper, Slide } from "vue-swiper-component";
components: {
Swiper,
Slide
}
//異步加載輪播圖的情況
//同步加載輪播圖情況
1
2
3
//加一些參數(shù)配置情況
//添加click事件
API
| 屬性 | 說明 | 默認(rèn) |
|---|---|---|
| autoPlay | 是否自動輪播 | true |
| showIndicator | 是否顯示輪播的那個點(diǎn) | true |
| interval | 每兩次隔多久滾動一次 | 2500 |
| duration | 每次滾動一頁需要多久時間 | 500 |
? Swiper 上面還暴露了其他方法,在 Swiper 標(biāo)簽上添加 ref 屬性, 例如:事件? this.$refs.swiper.prevSlide(); // 上一張圖 ? ?? this.$refs.swiper.nextSlide(); // 下一張圖 ? this.$refs.swiper.slideTo(2); //某一張圖
transtionend 事件 每次輪播出發(fā) 參數(shù)表示輪播到第幾個圖片 在Swiper上添加
// @transtionend="getNum" ? getNum(data) {console.log(data);}
click 事件 每個輪播圖上的事件
Other
可以通過覆蓋我的樣式進(jìn)行自定義樣式，Slide 標(biāo)簽里面可以寫 div 或者其他的東西
一些參數(shù)配置可以參考上面 Usage 第三個示例，異步渲染要加 v-if 保證渲染成功 參考第一個示例
如果其他問題可以郵箱溝通，452216418@qq.com;
暫時對 PC 支持不是很友好，等以后有時間了可以加上;
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/90498.html
摘要：項目背景圖片輪播是前端項目必有項，當(dāng)前有很多效果很酷炫的輪播插件，例如。此處應(yīng)該有掌聲，哈哈簡而言之，就是當(dāng)需要一個簡單的輪播時，可以選用，自己寫一個組件。舉個栗子，就是我實現(xiàn)的這個基于實現(xiàn)分頁組件，移動端和端均適用哦。 項目背景 圖片輪播是前端項目必有項，當(dāng)前有很多效果很酷炫的輪播插件，例如Swiper。但是當(dāng)項目中的圖片輪播只需要一個很簡單的輪播樣式，比如這樣的showImg(ht...
摘要：是一款輪播圖插件，我是用在里面，方便省事兒。官網(wǎng)地址地址安裝安裝完成之后，我沒有在中注冊它，而是在使用頁面注冊的。因為通常來說輪播圖只會在一個應(yīng)用的首頁展示，所以就沒必要在全局注冊它，只用在頁面注冊使用一下就可以了。 swipe是一款輪播圖插件，我是用在vue里面，方便省事兒。swipe里面有很多關(guān)于滑動的組建，我只用過輪播圖，如果以后有時間，可以再看看官網(wǎng)上別的組件介紹。官網(wǎng)地址 g...
閱讀 2823·2021-10-26 09:50
閱讀 2469·2021-10-11 11:08
閱讀 2213·2019-08-30 15:53
閱讀 1960·2019-08-30 15:44
閱讀 2456·2019-08-28 18:12
閱讀 2602·2019-08-26 13:59
閱讀 2912·2019-08-26 12:19
閱讀 2817·2019-08-26 12:09
