文档

slider

更新时间:

<slider> 组件用于在一个视图中交替展示多个图片。

嵌入组件支持

<slider> 组件支持更多高级功能,只能嵌套 <cell> 子组件使用。<cell> 用于定义 slider 中的子列表项。蚂蚁动态卡片引擎会对 <cell> 进行高效的内存回收以达到更好的性能。

样式

通用样式 中部分能力不支持,包括盒子模型中的 padding、布局中的 flex 容器、flex 成员、背景中的 background-image 相关、hover、动画。

属性

属性

描述

值类型

默认值

写法

备注

auto-play

设置是否自动轮播几张图片

boolean

true

auto-play="true"

interval

设置自动轮播图片的时间间隔,单位毫秒,当 auto-play 为 true 时生效

number

500ms

interval="500"

设置小于 500ms 的值,表现为 500ms

infinite

设置是否循环

boolean

true

infinite="true"

show-indicators

设置是否显示 indicator

boolean

false

show-indicators="true"

scrollable

设置是否可以通过手势操作滑动切换页面

boolean

true

scrollable="true"

index

设置显示 slider 的第几个页面

number

0

index="2"

previous-margin

设置透出前一个页面的距离

长度单位

0

previous-margin="200px"

不能与 infinite="true" 同时使用

next-margin

设置透出后一个页面的距离

长度单位

0

next-margin="200px"

不能与 infinite="true" 同时使用

事件

不支持 通用事件,支持的特定事件如下:

名称

描述

参数

on-change

当轮播索引改变时,触发该事件

index:展示的图片索引,number 类型

示例

<template>
    <div class="root">
        <slider class="testSlider" :index="index" show-indicators="false" scrollable="true" duration="1000" auto-play=true  @on-change="onChange(index)" >
            <cell class="cell" v-for="(item, i) in imageList">
                <image class="image" resize="contain" :src="item.src"></image>
            </cell>
        </slider>
    </div>
</template>
<script>
export default {
    data: {
    },
}
</script>>
<style>
    .root {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: white;
        width: 100%;
    }

    .image {
        width: 100%;
        height: 100%;
    }

    .cell {
        width: 100%;
        height: 100%;
        background-color: blue;
        flex-direction: column;
        align-items: center;
    }

    .testSlider {
        width: 100%;
        background-color: red;
        margin-top: 100px;
        height: 400px;
    }
</style>