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

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、翠屏ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的翠屏網(wǎng)站制作公司

為什么要使用Vue

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

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

 
  // 這里放具體類容
 

配置說明

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)聽事件

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

以上是“如何利用Vue實(shí)現(xiàn)移動端圖片輪播組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都做網(wǎng)站行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站欄目：如何利用Vue實(shí)現(xiàn)移動端圖片輪播組件-創(chuàng)新互聯(lián)
文章出自：http://weahome.cn/article/didhsd.html