利用Vue實現(xiàn)移動端圖片輪播組件的方法實例
前言
輪播圖的插件也有很多，用jQuery寫起來也不難，這里分享的是關(guān)于利用Vue實現(xiàn)移動端圖片輪播組件的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹：
wc-swiper
基于 Vue 的移動端的圖片輪播組件.
Why
- 之前一直在用 vue-awesome-swiper, 功能很齊全, 但是唯一的問題就是體積比較大.
- 我只是想要一個簡單的圖片輪播, 但是卻要引入 100多k 大小的文件, 這樣是不對的.
特點
- 支持自動播放 & 無限輪播 (loop) 效果
- 支持用戶滑動
- 壓縮后大概 ~6k 大小. (包含 js & css)
Install
npm i wc-swiper --save
import wcSwiper from 'wc-swiper' import 'wc-swiper/style.css' Vue.use(wcSwiper);
或者可以在單個組件中引入:
import {wcSwiper, wcSlide} from 'wc-swiper'
export default {
components: {
wcSwiper,
wcSlide
}
}
Usage
<wc-swiper> <wc-slide v-for="(v, k) in list" :key="k"> // 這里放具體類容 </wc-slide> </wc-swiper>
配置說明
1.wc-swiper 上存在兩個配置選項, duration & interval.
- duration: 配置每一次滑動持續(xù)的時間
- interval: 配置兩次滑動的間隔時間
2.控制 swiper 的樣式: 給 wc-swiper 設(shè)置樣式即可. (wc-swiper 的默認(rèn)高度為 200px).
3.異步數(shù)據(jù)的渲染: 建議在 wc-swiper 上面添加 v-if 判斷條件, 比如 v-if="slidesList.length",
以防止在數(shù)據(jù)返回之前, swiper 已經(jīng)渲染執(zhí)行完畢.
4.wc-slide 上面可以監(jiān)聽兩個事件: touchstart & click, 所以用戶可以直接在 wc-slide 上監(jiān)聽事件
<wc-slide @click="fa" @touchstart="fb"></wc-slide>
5.關(guān)于 pagination
目前暫時沒有提供相關(guān)的接口去修改 pagination 的樣式。如果有需要可以直接覆蓋默認(rèn)樣式.
pagination 的實現(xiàn)結(jié)構(gòu):
.wc-pagination .wc-dot .wc-dot.wc-dot-active
覆蓋上面 3 個class 即可.
項目地址
github地址：helicopert/wc-swiper
本地下載地址：http://xiazai.jb51.net/201708/yuanma/wc-swiper(jb51.net).rar
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了vue打包后,用后端接口報錯304、404問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了詳解VUE中的插值( Interpolation)語法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue項目打包解決靜態(tài)資源無法加載和路由加載無效(404)問題
這篇文章主要介紹了vue項目打包，解決靜態(tài)資源無法加載和路由加載無效(404)問題,靜態(tài)資源無法使用，那就說明項目打包后，圖片和其他靜態(tài)資源文件相對路徑不對,本文給大家介紹的非常詳細(xì)，需要的朋友跟隨小編一起看看吧2023-10-10
elementui如何解決el-table重復(fù)寫loading問題
這篇文章主要介紹了elementui如何解決el-table重復(fù)寫loading問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue中使用mixins混入方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue.js+boostrap項目實踐(案例詳解)的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
vue集成kindeditor富文本的實現(xiàn)示例代碼
這篇文章主要介紹了vue集成kindeditor富文本的實現(xiàn)示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了Vue?插槽?(Slots)?源碼解析與用法,通過實例,我們?nèi)媪私饬四J(rèn)插槽、具名插槽和作用域插槽的用法,并深入理解了其在Vue源碼中的實現(xiàn)原理,需要的朋友可以參考下2024-01-01
使用Vue寫一個todoList事件備忘錄經(jīng)典小案例
學(xué)習(xí)了幾天Vue之后終于迎來了第一個小案例,todoList是非常常見地一個小案例,下面這篇文章主要給大家介紹了關(guān)于使用Vue寫一個todoList事件備忘錄經(jīng)典小案例的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了詳解vue實現(xiàn)坐標(biāo)拾取器功能示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11