swipe
优质
小牛编辑
126浏览
2023-12-01
轮播图，可自定义轮播时间间隔、动画时长等。
引入
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 | 描述 |
|---|---|
| - | 单个轮播图的内容 |