Mint UI 轮播图 - Swipe

轮播图，可自定义轮播时间间隔、动画时长等。

引入

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

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

例子

基础用法

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

轮播图切换时会触发 ​change​ 事件，参数为切入轮播图的索引

<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

参数	说明	类型	可选值	默认值
speed	动画持时（毫秒）	Number		300
auto	自动播放的时间间隔（毫秒）	Number		3000
defaultIndex	初始显示的轮播图的索引	Number		0
continuous	是否可以循环播放	Boolean		true
showIndicators	是否显示​ indicators​	Boolean		true
prevent	是否在 ​touchstart ​事件触发时阻止事件的默认行为。设为​ true​ 可提高运行在低版本安卓浏览器时的性能	Boolean		false
stopPropagation	是否在 ​touchstart ​事件触发时阻止冒泡。	Boolean		false

Slot

mt-swipe

name	描述
-	一个或多个 mt-swipe-item 组件

mt-swipe-item

name	描述
-	单个轮播图的内容