轮播

轮播组件用于在有限空间内循环展示一系列图片。

属性设置

轮播组件支持丰富的属性设置，例如常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。

常用设置

属性	说明
选项内容	配置轮播组件的显示内容，可以本地上传也可以通过工作流动态绑定数据，详情请参见 设置组件内容参数 。
图片列表	配置轮播组件要展示的图片。本地上传时，支持上传 .png 和 .jpg 格式的图片，但目前不支持 .svg 格式。 仅选项内容配置为固定内容时，才支持此配置项。
绑定数组	支持绑定工作流，以动态获取数据作为轮播组件的显示图片。 绑定的工作流的输出数据必须为Array类型。 需要配置事件以触发调用工作流。 仅选项内容配置为动态内容时，才支持此配置项。
图片	绑定数组中的图片字段，例如设置数据绑定为 item.image ， 仅选项内容配置为动态内容时，才支持此配置项。
自动轮播	配置轮播组件是否自动轮播图片，默认开启自动轮播。

位置设置

轮播组件提供三种位置类型选项，以灵活配置组件在界面中的位置。

• 相对定位：堆叠布局下，元素自动向下或向右排列。

• 绝对定位：页面滚动时，绝对定位的元素会随页面一起滚动。

• 固定定位：页面滚动时，固定定位的元素会保持固定位置不变。

尺寸设置

属性	说明
宽度	配置轮播组件的宽度值，支持以下宽度设置方式： 固定：固定的像素值，不会随容器大小变化。 百分比：元素的宽度占容器宽度的百分比。 填充容器：元素的宽度填满容器的可用空间。 适应内容：元素的宽度会随着内容的大小自动调整。
高度	配置轮播组件的高度值，支持以下高度设置方式： 固定：固定的像素值，不会随容器大小变化。 百分比：元素的高度占容器高度的百分比。 填充容器：元素的高度填满容器的可用空间。 适应内容：元素的高度会随着内容的大小自动调整。
尺寸限制	配置轮播组件的尺寸限制，支持配置最大高度、最小高度、最大宽度、最小宽度。 合理设置尺寸限制参数可以确保组件在不同屏幕尺寸下保持布局的稳定性和一致性，避免因屏幕尺寸差异而导致的布局问题。

样式设置

属性	说明
填充	配置轮播组件背景的显示颜色。
圆角	配置轮播组件背景的圆角，支持单独设置四个角的圆角。
内边距	配置轮播组件背景的内边距，可以单独设置四个方向的内边距。
外边距	配置轮播组件背景的外边距，可以单独设置四个方向的外边距。
边框	配置轮播组件背景的边框样式。支持如下设置方式： 预设样式：提供预设的边框样式，可直接使用。 自定义样式：通过边框线的颜色、粗细和样式，自定义边框样式。
阴影	配置轮播组件背景的阴影样式，增强组件的立体感。支持如下设置方式： 预设样式：提供预设的阴影样式，可直接使用。 自定义样式：支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色，自定义阴影样式。
图层模糊	配置轮播组件的模糊效果。数值越大，模糊效果越明显。

变换设置

丰富界面视觉效果的参数。

属性	说明
缩放	配置轮播组件大小的缩放比例。
旋转	配置轮播组件围绕中心点旋转的角度。
位移	配置轮播组件在水平和垂直方向上的移动距离。
倾斜	配置轮播组件在水平和垂直方向上的倾斜角度。

状态设置

控制轮播组件出现态的视觉效果参数。

属性	说明
出场效果	设置轮播组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入等动画效果。

可见性设置

控制轮播组件隐藏或显示的参数，支持在特定条件下隐藏轮播组件。

• 设置为 false：显示组件。

• 设置为 true：隐藏组件。

• 设置为变量：通过变量值（true 或 false）动态控制轮播组件的可见性。

• 例如可以通过单行输入组件控制轮播组件的可见性。单行输入组件 ID 为 Input1，当你将轮播组件的可见性设置为{{ Input1.value}}后，在单行输入组件中输入文本时，{{ Input1.value}}值为 true，轮播组件将被隐藏。

事件设置

通过配置轮播组件的事件，可以为轮播组件添加丰富的交互功能，例如点击、加载等，以增强用户体验和界面的互动性。

事件项	说明
事件类型	图片切换时：当轮播组件中的图片切换时触发执行事件。
组件方法	支持以下方法： 跳转到上一项：将轮播组件中的内容跳转到上一项。 跳转到下一项：将轮播组件中的内容跳转到下一项。 跳转到第一项：展示轮播组件中的第一项内容。 跳转到最后一项：展示轮播组件中的最后一项内容。 设置隐藏：隐藏组件，使其不可见。

当前版本实操

本页使用独立的 轮播 示例页面，页面内不混放其他组件。

1. 进入低代码应用的 用户界面，确认搭建类型为 小程序和 H5。
2. 单击画布底部的 新建页面，创建一个空白页面。
3. 在左侧 组件 面板中找到 轮播，单击或拖入当前页面。
4. 切换到 结构 面板，确认该页面只包含当前 轮播 组件。
5. 选中组件，在右侧 属性 面板中设置轮播图片、自动播放、间隔时间和指示点。
6. 检查画布中的实际显示效果，再使用页面顶部的预览入口验证交互。