# 轮播面板

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183667994400514054`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/容器类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 轮播面板

## 一、功能背景和价值用途

随着互联网信息量的快速增长，如何在有限的页面空间中高效展示多样化内容成为用户体验设计的重要课题。轮播面板（Carousel Panel） 应运而生，作为一种常见且实用的交互组件，它被广泛应用于网页首页、移动端App、后台管理系统等界面中。轮播面板从最初的静态图片切换演变为支持多类型内容（如图文卡片、视频、表单等）、响应式布局、自动播放、手势滑动等多种交互方式的智能展示组件。

## 二、轮播面板配置说明

### 1、属性-面板设置

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340833533526033&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

1、

默认两个面板，可自定义增加、删除面板【删除面板会一同删除面板内已设置组件】

2、

点击面板后的【点击设计】按钮，即可在左侧直接将组件拖拽入面板进行设计

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340833533526039&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、

更多菜单内，重命名、复制面板【同步复制面板内组件】

4、

拖拽面板排序

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340837691351044&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、属性-轮播设置

1、

轮播动画

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340837708955666&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2、

轮播频率、轮播速度

轮播频率：可设置不轮播、自定义轮播频率

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340837708955675&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、

循环轮播

1.

启用时，最后一个面板支持向后切换为第一个面板

2.

禁用时，最后一个面板将不向后切换，但可向前切换成第一个面板

3.懒加载：默认开启启用后，用户查看当前展示的面板时、系统自动加载后续几个面板，保持查看的连贯性

### 3、属性-轮播引导指引

启用后，仅用户**首次打开** 时会展示引导动画效果，可设置动画的播放次数以及隐藏方式

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340841992503300&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

1、

播放次数：1-6次，一直循环

2、

隐藏方式：播放结束后隐藏【手动滑动，也受播放次数设置控制】、操作后隐藏【手动滑动轮播页面后，隐藏指引】

### 4、样式-基本样式

可开关分页按钮、分页器颜色，分布位置，开关是否显示

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340842014408718&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 三、上下游关联功能

1、

登录页前使用轮播面板，可正常使用轮播引导设置

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340842014408727&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 四、DEMO搭建实例

1、页面或者表单内，轮播目标图片已作展示，可挂载在门户

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340846166769673&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
