轮播图
#
适用场景用于快速搭建轮播图展示效果,并支持配置图片的点击跳转、播放间隔等功能。
#
基础能力说明#
可配置实现轮播图的展示效果仅需在组件配置区中进行简单配置即可实现轮播图的展示效果,也可以在配置区中为每一张图片设置其对应的跳转页面,同时在高级设置中我们支持对轮播图组件的播放动画、锚点等高级属性进行深度的自定义配置。
#
属性介绍组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
自动切换时间间隔 | interval | number | 基础属性 | 5000 | 配置轮播图滚动的时间间隔,时间单位为ms |
纵向轮播 | vertical | boolean | 基础属性 | false | 开启后,轮播的滚动方式将会由横向滚动变更为纵向滚动 |
自动切换 | autoplay | boolean | 基础属性 | true | 开启后,轮播图将会自动根据配置的时间间隔进行自动滚动,关闭后则轮播图仅支持通过点击锚点的方式进行切换 |
锚点激活色 | indicatorActiveColor | string | 高级属性 | "rgba(0, 0, 0, 0.9)" | 更改锚点选中时的颜色 |
锚点颜色 | indicatorColor | string | 高级属性 | "rgba(200, 200, 200, 0.9)" | 更改锚点普通状态下的颜色 |
滑动动画时长 | duration | number | 高级属性 | 500 | 更改轮播图切换时的滑动动画时长 |
当前所在滑块的 index | current | number | 高级属性 | 0 | 更改轮播图的默认展示位置,0为默认展示第一张轮播图,以此类推 |
衔接滑动 | circular | boolean | 高级属性 | true | 更改轮播图切换时动画的滑动方式 |
导航锚点 | indicatorDots | boolean | 高级属性 | true | 开启/关闭轮播图锚点 |
#
事件介绍组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
切换 | change | 兼容三端 | - |