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动画持时(毫秒)Number300
auto自动播放的时间间隔(毫秒)Number3000
defaultIndex初始显示的轮播图的索引Number0
continuous是否可以循环播放Booleantrue
showIndicators是否显示 indicatorsBooleantrue
prevent是否在 touchstart 事件触发时阻止事件的默认行为。设为 true 可提高运行在低版本安卓浏览器时的性能Booleanfalse
stopPropagation是否在 touchstart 事件触发时阻止冒泡。Booleanfalse

Slot

mt-swipe

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

mt-swipe-item

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


实例演示

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部