利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的方法實(shí)例
前言
輪播圖的插件也有很多，用jQuery寫起來(lái)也不難，這里分享的是關(guān)于利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹：
wc-swiper
基于 Vue 的移動(dòng)端的圖片輪播組件.
Why
- 之前一直在用 vue-awesome-swiper, 功能很齊全, 但是唯一的問(wèn)題就是體積比較大.
- 我只是想要一個(gè)簡(jiǎn)單的圖片輪播, 但是卻要引入 100多k 大小的文件, 這樣是不對(duì)的.
特點(diǎn)
- 支持自動(dòng)播放 & 無(wú)限輪播 (loop) 效果
- 支持用戶滑動(dòng)
- 壓縮后大概 ~6k 大小. (包含 js & css)
Install
npm i wc-swiper --save
import wcSwiper from 'wc-swiper' import 'wc-swiper/style.css' Vue.use(wcSwiper);
或者可以在單個(gè)組件中引入:
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>
配置說(shuō)明
1.wc-swiper 上存在兩個(gè)配置選項(xiàng), duration & interval.
- duration: 配置每一次滑動(dòng)持續(xù)的時(shí)間
- interval: 配置兩次滑動(dòng)的間隔時(shí)間
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)聽兩個(gè)事件: touchstart & click, 所以用戶可以直接在 wc-slide 上監(jiān)聽事件
<wc-slide @click="fa" @touchstart="fb"></wc-slide>
5.關(guān)于 pagination
目前暫時(shí)沒有提供相關(guān)的接口去修改 pagination 的樣式。如果有需要可以直接覆蓋默認(rèn)樣式.
pagination 的實(shí)現(xiàn)結(jié)構(gòu):
.wc-pagination .wc-dot .wc-dot.wc-dot-active
覆蓋上面 3 個(gè)class 即可.
項(xiàng)目地址
github地址：helicopert/wc-swiper
本地下載地址：http://xiazai.jb51.net/201708/yuanma/wc-swiper(jb51.net).rar
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。這篇文章主要介紹了Vue表單實(shí)例代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
Vue?ElementUI?table實(shí)現(xiàn)雙擊修改編輯某個(gè)內(nèi)容的方法
在實(shí)現(xiàn)表格單元格雙擊編輯功能時(shí),需使用@cell-dblclick事件來(lái)觸發(fā)雙擊操作,將單元格切換為input輸入框,通過(guò)ref引用和綁定失焦及回車事件來(lái)確認(rèn)編輯,同時(shí),需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09
這篇文章主要介紹了Vue 表單輸入綁定v-model，v-model指定可以實(shí)現(xiàn)表單值與屬性的雙向綁定。即表單元素中更改了值會(huì)自動(dòng)的更新屬性中的值，屬性中的值更新了會(huì)自動(dòng)更新表單中的值 ，下面一起進(jìn)入文章來(lái)哦姐文章詳情內(nèi)容2021-10-10
這篇文章主要介紹了vue $attrs的使用全面解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vant/vue跨域請(qǐng)求解決方案,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單驗(yàn)證小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vuex之Action的使用方法詳解,Action 類似于 mutation ,不同在于Action 提交的是 mutation,而不是直接變更狀態(tài),2023-11-11
Action 可以包含任意異步操作,需要的朋友可以參考下
使用Vue和Firebase實(shí)現(xiàn)后臺(tái)數(shù)據(jù)存儲(chǔ)的示例代碼
在現(xiàn)代 web 應(yīng)用開發(fā)中,前端和后端的無(wú)縫協(xié)作至關(guān)重要,借助 Firebase 等云計(jì)算解決方案,前端開發(fā)者可以輕松實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)與實(shí)時(shí)更新,本文將為大家詳細(xì)介紹如何利用 Vue 3 的 Composition API 和 Firebase 實(shí)現(xiàn)后臺(tái)數(shù)據(jù)存儲(chǔ),需要的朋友可以參考下2024-10-10
記一次Vue.js混入mixin的使用(分權(quán)限管理頁(yè)面)
這篇文章主要介紹了記一次Vue.js混入mixin的使用(分權(quán)限管理頁(yè)面)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
vue里的axios如何獲取本地json數(shù)據(jù)
這篇文章主要介紹了vue里的axios如何獲取本地json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08