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