基於 Vue 實現的 移動端圖片輪播組件.

wc-swiper

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

why

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

特色

• 支持自動播放 & 無限輪播 (loop) 效果
• 支持用戶手動滑動
• 壓縮後大概 ~8k

使用

npm i wc-swiper --save

// 在入口文件中引入(暫時不支持單組件引入的方式):
import wcSwiper from 'wc-swiper'
import 'wc-swiper/style.css'
Vue.use(wcSwiper);

// 在須要使用的 view 裏面引入:
<wc-swiper>
    <wc-slide>
        // 這裏放你須要輪播的內容, 好比一張圖片
    </wc-slide>
</wc-swiper>

// 循環列表
<wc-swiper>
   <wc-slide v-for="(slide, key) in slides" :key="key">
   </wc-slide>
</wc-swiper>

// 異步獲取 slides 的時候, 須要在 wc-swiper 上面添加 v-if 判斷
<wc-swiper v-if="slides.length">
   <wc-slide v-for="(slide, key) in slides" :key="key">
   </wc-slide>
</wc-swiper>

// 帶配置選項
<wc-swiper :duration="900" :interval="2000" @transitionend="fn">
    <wc-slide>
        // 這裏放你須要輪播的內容, 好比一張圖片
    </wc-slide>
</wc-swiper>

配置

在 wc-swiper 上面暴露了一些配置選項:

duration:    一次滑動的時間 | default: 500ms
interval:    兩次滑動間隔時間 | default: 2500ms
autoplay:    是否自動播放 | default: true
therehold:    用戶滑動多少距離以後自動翻頁 | default: 110
curSlide:   默認顯示第幾個 slide | default: 0

事件

• 在 wc-swiper 上能夠監聽一些事件:

transitionend 事件
每一次滑動結束(不論用戶手動滑動, 仍是自動滑動) 都會觸發 transitionend 事件. 
transtionend 攜帶惟一一個參數:currentSlide, 用來代表, 當前 slide 是第幾個 slide.
而且要注意: slide 從 0 開始計數.

• 在 wc-slide 上面能夠監聽 click 事件.

方法

有些時候, 你可能想要實現這樣一種操做: 點擊一個按鈕, 讓 swiper 跳轉到指定的 slide, 或者點擊按鈕, 讓

swiper 跳轉到上一個或者下一個. 對此, 你能夠這樣操做:

1. 在 <wc-swiper> 標籤上添加 ref 屬性, 例如: <wc-swiper ref="swiper"></wc-swiper>
2. 經過 this.$refs.swiper 來引用預先提供的 3 個方法:

slideTo (index) 跳轉至指定索引 (index 從 0 開始)
next () 跳轉到下一個
previous () 跳轉到上一個

例如:
this.$refs.swiper.slideTo(3) // 跳轉到索引爲 3 的 slide

問題描述

1. 如何設置輪播圖的高度

經過設置 wc-swiper 的高度便可. 好比:

<wc-swiper class="swiper"></wc-swiper>

.swiper {
    height: 200px;
}

2. 如何渲染異步數據

通常狀況下, 輪播的數據可能經過接口請求得來, 此時, 須要在 wc-swiper 上面加上 v-if 判斷, 從而延遲 wc-swiper 的渲染時機:

<wc-swiper v-if="slides.length">
   <wc-slide v-for="(slide, key) in slides" :key="key">
   </wc-slide>
</wc-swiper>

3. 點擊 slide 的時候若是須要跳轉新的頁面該怎麼辦

能夠爲 wc-slide 的內容包裹一層 a 標籤

<wc-swiper>
    <wc-slide>
        <a>
           //content
        </a>
    </wc-slide>
</wc-swiper>

或者能夠在 wc-slide 上面監聽 click 事件:

<wc-swiper>
    <wc-slide @click="fn"></wc-slide>
</wc-swiper>

4. 怎麼添加 pagination 或者左右箭頭?

我的認爲, pagination 以及 arrow-left, arrow-right, 都只是 swiper 的配套設施, 而不該該是組成的一部分. 因此沒有提供默認的 pagination 和 arrow, 而是提供了 slot, 若是你但願

爲 swiper 添加 pagination 或者 arrow, 能夠經過這樣的方式添加:

<wc-swiper>
    <div slot="pagination"></div>
    <div slot="arrowLeft"></div>
    <div slot="arrowRight"></div>
</wc-swiper>

能夠參考這個的寫法:

存在的問題

• 多指觸碰的時候, 好比多根手指同時滑動的時候, 就會出現問題, 這種極端狀況, 比較複雜和少見, 暫時不考慮.