什么是卡片组件slider_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

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