如何利用Vue實現移動端圖片輪播組件

小編給大家分享一下如何利用Vue實現移動端圖片輪播組件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

wc-swiper

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

Why

• 之前一直在用 vue-awesome-swiper, 功能很齊全, 但是唯一的問題就是體積比較大.

• 我只是想要一個簡單的圖片輪播, 但是卻要引入 100多k 大小的文件, 這樣是不對的.

特點

• 支持自動播放 & 無限輪播 (loop) 效果

• 支持用戶滑動

• 壓縮后大概 ~6k 大小. (包含 js & css)

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.

• 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 即可.

以上是“如何利用Vue實現移動端圖片輪播組件”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！