前言

輪播圖的插件也有很多，用jQuery寫起來也不難，這里分享的是關于利用Vue實現移動端圖片輪播組件的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹：

wc-swiper

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

Why

特點

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.

2.控制 swiper 的樣式: 給 wc-swiper 設置樣式即可. (wc-swiper 的默認高度為 200px).

3.異步數據的渲染: 建議在 wc-swiper 上面添加 v-if 判斷條件, 比如 v-if="slidesList.length",
以防止在數據返回之前, swiper 已經渲染執行完畢.

4.wc-slide 上面可以監聽兩個事件: touchstart & click, 所以用戶可以直接在 wc-slide 上監聽事件

<wc-slide @click="fa" @touchstart="fb"></wc-slide>

5.關于 pagination

目前暫時沒有提供相關的接口去修改 pagination 的樣式。如果有需要可以直接覆蓋默認樣式.

pagination 的實現結構:

.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

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com