轮播图

更新时间:2025-01-17 03:36:30

简介

轮播图组件是一种动态展示多个图像或内容的用户界面元素,通常以自动播放或用户控制的方式在不同内容之间切换。

image

配置项

分类

配置

示例

说明

分类

配置

示例

说明

内容

数据源

image

轮播图的数据源

交互

隐藏

image

控制轮播图的默认展示状态,为true 时将隐藏展示轮播图。

自动切换

image

在设定的时间间隔下自动在展示项之间进行切换,从而实现无需用户操作即可浏览所有展示项的效果。

自动切换的间隔

image

自动切换的间隔时间。

启用拖拽

image

可以拖拽切换展示项。

渐变切换动效

image

是否支持渐变切换动效。

动画效果

image

渐变切换的动画效果。支持匀速、缓入、缓出、缓入缓出。

切换动效的时间

image

渐变切换动画效果的持续时间。

样式

高度

image

详情参见通用属性

外边距

image

详情参见通用属性

显示箭头

image

是否展示切换箭头。

显示面板指示点

image

是否展示切换指示点。

面板指示点位置

image

指示点的位置。

图片填充

image

指定图片的内容应该如何适应到其使用高度和宽度确定的框。详情参见 object-fit 属性

  • 覆盖:图片在保持其宽高比的同时填充元素的整个内容框

  • 包含:图片将被缩放,以在填充元素的内容框时保持其宽高比。

  • 拉伸:图片将完全填充组件框。如果图片的宽高比与组件框不相匹配,那么图片将被拉伸以适应组件框。

横向对齐

image

标题内容横向的对齐方式

纵向对齐

image

标题内容纵向的对齐方式

CSS 样式

背景颜色

image

轮播图每个展示项的背景颜色

标题文字颜色

image

标题内容的文字颜色

指示点宽度

image

指示点未激活状态下的宽度

激活态指示点宽度

image

指示点被激活状态下的宽度

指示点之间的间距

image

指示点之间的间距

指示点高度

image

指示点高度

指示点距离边缘的位置

image

指示点距离底部/顶部边缘的距离

属性与方法

名称

类型

示例

说明

名称

类型

示例

说明

dataSource

array

carousel1.dataSource

只读,轮播图组件的数据源

事件回调

配置

说明

配置

说明

image

切换展示项时将要触发的事件

  • 本页导读
  • 简介
  • 配置项
  • 属性与方法
  • 事件回调