点我扫二维码，查看demo

# Swiper 轮播

# 介绍

用于循环播放一组图片或内容。

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Swiper, SwiperItem } from '@dolphin-iot/ui'

Vue.use(Swiper);
Vue.use(SwiperItem);

1
2
3
4
5

# 代码演示

# 基础用法

每个 SwipeItem 代表一张轮播卡片，可以通过 autoplay 属性设置自动轮播的间隔。indicator-color 设置底部指示器的颜色

<template>
    <mx-swiper default-active="1" :autoplay="2000" indicator-color="white">
        <mx-swiper-item>1</mx-swiper-item>
        <mx-swiper-item>2</mx-swiper-item>
        <mx-swiper-item>3</mx-swiper-item>
        <mx-swiper-item>3</mx-swiper-item>
    </mx-swiper>
</template>
<style>
.mx-swiper-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 监听 change 事件

每个 SwipeItem 代表一张轮播卡片，可以通过 autoplay 属性设置自动轮播的间隔。indicator-color 设置底部指示器的颜色

<template>
    <mx-swiper default-active="1" :autoplay="2000" indicator-color="white" @change="onChange">
        <mx-swiper-item>1</mx-swiper-item>
        <mx-swiper-item>2</mx-swiper-item>
        <mx-swiper-item>3</mx-swiper-item>
        <mx-swiper-item>3</mx-swiper-item>
    </mx-swiper>
</template>
<script>
export default{
    methods:{
        onChange(index){
            console.log(index)
        }
    }
}
</script>
<style>
.mx-swiper-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 纵向滚动

设置 vertical 属性后滑块会纵向排列，此时需要指定滑块容器的高度。

<template>
    <mx-swiper :vertical="true" style="height:200px" :autoplay="2000" indicator-color="white">
        <mx-swiper-item>1</mx-swiper-item>
        <mx-swiper-item>2</mx-swiper-item>
        <mx-swiper-item>3</mx-swiper-item>
        <mx-swiper-item>3</mx-swiper-item>
    </mx-swiper>
</template>
<script>
export default{
    methods:{
        onChange(index){
            console.log(index)
        }
    }
}
</script>
<style>
.mx-swiper-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 自定义指示器

通过 indicator 插槽可以自定义指示器的样式。

<template>
    <mx-swiper :autoplay="2000" indicator-color="white">
        <mx-swiper-item>1</mx-swiper-item>
        <mx-swiper-item>2</mx-swiper-item>
        <mx-swiper-item>3</mx-swiper-item>
        <mx-swiper-item>3</mx-swiper-item>
        <template v-slot:indicator="{active}">
            <div  class="custom-indicator">{{ active + 1 }}/4</div>
        </template>
    </mx-swiper>
</template>
<script>
export default{
    methods:{
        onChange(index){
            console.log(index)
        }
    }
}
</script>
<style>
.mx-swiper-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# Api

# Swiper Props

参数	说明	类型	默认值	是否必须
autoplay	自动轮播间隔，单位为 ms	number \| string	`-`	`是`
duration	动画时长，单位为 ms	number \| string	`500`	`-`
default-active	初始位置索引值	number	`0`	`-`
loop	是否循环播放	boolean	`true`	`-`
show-indicator	是否显示指示器	boolean	`true`	`-`
indicator-color	指示器颜色	string	`-`	`-`
vertical	是纵向滚动	boolean	`false`	`-`
swipeable	是否可以通过手势滑动	boolean	`true`	`-`

# Swiper Events

事件名称	说明	回调参数
change	每一页轮播结束后触发	index: 当前页的索引

# Swiper Slots

名称	说明
default	轮播内容
indicator	自定义指示器

# Swiper 方法

通过 ref 可以获取到 Swipe 实例并调用实例方法。

方法名称	说明	参数	返回值
prev	切换到上一轮播	`-`	`-`
next	切换到下一轮播	`-`	`-`
swipeTo	切换到指定轮播	index: Number	`-`

← Badge 徽标 Tag 标签 →