閱讀(9.5k) 書簽贊(0) 我要糾錯

Mint UI 輪播圖 - Swipe

2021-09-06 15:00 更新

輪播圖，可自定義輪播時間間隔、動畫時長等。

引入

import { Swipe, SwipeItem } from 'mint-ui';

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

例子

基礎(chǔ)用法

<mt-swipe :auto="4000">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

隱藏? indicators?

<mt-swipe :show-indicators="false">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

取消自動播放

<mt-swipe :auto="0">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

change 事件

輪播圖切換時會觸發(fā) ?change? 事件，參數(shù)為切入輪播圖的索引

<mt-swipe @change="handleChange">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item>
</mt-swipe>

methods: {
  handleChange(index) {
    ...
  }
}

API

參數(shù)	說明	類型	默認值
speed	動畫持時（毫秒）	Number	300
auto	自動播放的時間間隔（毫秒）	Number	3000
defaultIndex	初始顯示的輪播圖的索引	Number	0
continuous	是否可以循環(huán)播放	Boolean	true
showIndicators	是否顯示? `indicators`?	Boolean	true
prevent	是否在 ?`touchstart` ?事件觸發(fā)時阻止事件的默認行為。設(shè)為? `true`? 可提高運行在低版本安卓瀏覽器時的性能	Boolean	false
stopPropagation	是否在 ?`touchstart` ?事件觸發(fā)時阻止冒泡。	Boolean	false