vue-swiper
基于 Vue2.0 開發,基本滿足大部分功能
輕量、高性能輪播插件。目前支持 無縫銜接自動輪播、無限輪播、手勢輪播
沒有引入第三方庫,原生 js 封裝,打包之后只有 8.2KB 大小 性能還是杠杠滴
demo? 覺得好用給一個 star 哦~ ?
github傳送門 Installnpm i vue-swiper-component --save cnpm i vue-swiper-component --save //國內鏡像Usage
import { Swiper, Slide } from "vue-swiper-component"; components: { Swiper, Slide } //異步加載輪播圖的情況API//同步加載輪播圖情況 //加一些參數配置情況 1 2 3 //添加click事件
屬性 | 說明 | 默認 |
---|---|---|
autoPlay | 是否自動輪播 | true |
showIndicator | 是否顯示輪播的那個點 | true |
interval | 每兩次隔多久滾動一次 | 2500 |
duration | 每次滾動一頁需要多久時間 | 500 |
? Swiper 上面還暴露了其他方法,在 Swiper 標簽上添加 ref 屬性, 例如:事件? 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 支持不是很友好,等以后有時間了可以加上;
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90498.html
摘要:項目背景圖片輪播是前端項目必有項,當前有很多效果很酷炫的輪播插件,例如。此處應該有掌聲,哈哈簡而言之,就是當需要一個簡單的輪播時,可以選用,自己寫一個組件。舉個栗子,就是我實現的這個基于實現分頁組件,移動端和端均適用哦。 項目背景 圖片輪播是前端項目必有項,當前有很多效果很酷炫的輪播插件,例如Swiper。但是當項目中的圖片輪播只需要一個很簡單的輪播樣式,比如這樣的showImg(ht...
摘要:是一款輪播圖插件,我是用在里面,方便省事兒。官網地址地址安裝安裝完成之后,我沒有在中注冊它,而是在使用頁面注冊的。因為通常來說輪播圖只會在一個應用的首頁展示,所以就沒必要在全局注冊它,只用在頁面注冊使用一下就可以了。 swipe是一款輪播圖插件,我是用在vue里面,方便省事兒。swipe里面有很多關于滑動的組建,我只用過輪播圖,如果以后有時間,可以再看看官網上別的組件介紹。官網地址 g...
閱讀 2743·2021-10-26 09:50
閱讀 2385·2021-10-11 11:08
閱讀 2127·2019-08-30 15:53
閱讀 1905·2019-08-30 15:44
閱讀 2382·2019-08-28 18:12
閱讀 2518·2019-08-26 13:59
閱讀 2851·2019-08-26 12:19
閱讀 2750·2019-08-26 12:09