快捷導航

利用Vue實現(xiàn)移動端圖片輪播組件的方法實例

更新時間：2017年08月23日 09:06:22 作者：云水搖啊搖

輪播圖是前端很常用的一個網(wǎng)頁特效，幾乎所有的網(wǎng)站或多或少都會用到這個特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實現(xiàn)移動端圖片輪播組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。

前言

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

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 設(shè)置樣式即可. (wc-swiper 的默認高度為 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 的樣式。如果有需要可以直接覆蓋默認樣式.

pagination 的實現(xiàn)結(jié)構(gòu):

.wc-pagination
 .wc-dot
 .wc-dot.wc-dot-active

覆蓋上面 3 個class 即可.

項目地址

github地址：helicopert/wc-swiper

總結(jié)

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

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频