前言

輪播圖的插件也有很多，用jQuery寫起來也不難，這里分享的是關(guān)于利用Vue實(shí)現(xiàn)移動端圖片輪播組件的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹：

wc-swiper

基于 Vue 的移動端的圖片輪播組件.

Why

• 之前一直在用 vue-awesome-swiper, 功能很齊全, 但是唯一的問題就是體積比較大.
• 我只是想要一個(gè)簡單的圖片輪播, 但是卻要引入 100多k 大小的文件, 這樣是不對的.

特點(diǎn)

• 支持自動播放 & 無限輪播 (loop) 效果
• 支持用戶滑動
• 壓縮后大概 ~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>

配置說明

1.wc-swiper 上存在兩個(gè)配置選項(xiàng), duration & interval.

• duration: 配置每一次滑動持續(xù)的時(shí)間
• interval: 配置兩次滑動的間隔時(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.VeVB.COm/201708/yuanma/wc-swiper(VeVB.COm).rar

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。