# 幻灯片

来源快照：`result_data_new_260518.json`

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

## 正文

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

【幻灯片】是在有限空间内整合图文、数据通过字体、动画设计更加直观的将复杂信息转化为可操作的认知路径，提升内容的连贯性和用户体验。

## 二、功能使用说明

### 1、功能入口

【页面设计器】-【组件】-【幻灯片】-拖拽至设计器内，图片来源支持手动添加、数据源两种方式。（图1）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544449024671961&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、图片来源设置

#### 2.1、手动添加

1）新拖拽到设计器的幻灯片组件默认为手动添加，手动添加即从素材库、本地或URL中添加。（图2）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160545024485384381&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）

2）添加后，可以设置更换图片、链接、图片的标题、描述、删除（图3）

更换图片：点击后即打开图片设置弹框，可重新配置图片来源与图片。

链接：点击后即图片下发出现事件动作按钮，点击后即可对当前图片设置事件。

图片标题：点击后图片下发出现标题输入框，所输入的内容会立即回显在图片上。

描述：点击后图片下发出现描述输入框，所输入的内容会立即回显在图片上。

删除：点击删除后，当前图片则不展示。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544990190551105&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）

#### 2.2、数据源添加

来源设置数据源即从eb表单、业务表单或数据仓库中获取图片（图4）

选择数据源设置图片字段，可以根据需要设置标题字段、描述字段、添加交互事件（图4）

除此之外，支持设置过滤条件、显示条数及字段排序。（图4）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544388914937943&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)

（图4）

### 3、幻灯片其他配置项

#### 3.1、显示方式

图片的显示方式，默认为拉伸，同时支持选择原图、等比例、等比截取、适应、平铺共6种。（图5）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544577682956432&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)

（图5）

#### 3.2、切换动画

图片切换的动画效果，支持淡入淡出、左右滑动、上下滑动、方块、3d流、3d翻转、多图展示共7种。（图6）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544861304717350&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)

（图6）

#### 3.3、图片轮播设置

轮播设置为不轮播，支持切换选择3秒、5秒、7秒和自定义时间，设置后，预览时图片会根据所设置的时间轮播。（图7）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544693854584909&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)

（图7）

#### 3.4、图片懒加载

默认不开启，开启后不会提前加载所有图片，在轮播或切换时才会加载。（图8）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544599222698034&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)

（图8）

#### 3.5、显示图片标题

默认开启，关闭后，图片标题不展示。（图9）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544354555199497&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)

（图9）

### 4、组件样式

在样式中可以设置不同的导航方式或自定义样式。（图10）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544758240182323&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)

（图10）

## 三、使用注意点

### 1、幻灯片支持查看大图、原图

查看大图：当幻灯片图片未设置事件时，预览时点击图片即可查看大图。（图11）

查看原图：当幻灯片图片为素材库系统图片时预览时不支持查看原图（图11）

查看原图：当幻灯片图片非素材库系统图片时，预览支持查看原图（图11）

查看原图：查看原图仅支持pc端，移动端不支持（图11）

查看原图：当点击原图后的图片关闭后再次打开，此时为缩略图（图11）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544354506965086&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)

（图11）

### 2、图片来源与切换动画的联动

2.1、当幻灯片的图片来源是手动添加，动画效果为多图展示时：

【默认展示图片数量】只能小于等于手动添加的图片数量，最小数量为1。（图12）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544393052618779&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)

（图12）

2.2、当幻灯片的图片来源是数据源动画效果为多图展示时（图13）

【默认展示图片数量】只能小于等于【显示条数】的数量。

2.2.1、【默认展示图片数量】：可不填，不填时，默认展示1张图片。

2.2.2、【每次轮播数量】的数量要小于等于【默认展示图片数量】的数量。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544869864357972&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)

（图13）

2.2.3、当幻灯片为多图展示时，组件样式里的系统样式选中以后都不生效。（图14）

当幻灯片为多图展示时，组件样式非系统样式选中以后正常生效。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544698034315379&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)

（图14）

## 四、上下游关联功能点

1、

幻灯片数据源支持添加动态参数

系统参数具体使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?freepass_doc=1&id=1159789509534973957&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250")

2、数据集具体使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docDetail/1130954941699827478](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?freepass_doc=1&id=1160524116543250563&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docDetail/1130954941699827478")

3、组件标题和底部使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?freepass_doc=1&id=1159789715744890921&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docEdit/1126198012134236250")

4、事件动作使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docEdit/1124192575847580693](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?freepass_doc=1&id=1159192088358584536&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docEdit/1124192575847580693")

5、字段排序使用方法，请参考：

[https://www.e-cology.com.cn/sp/doc/docDetail/125808419831955819](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?freepass_doc=1&id=1159790879839256584&space_id=1157961794811633670 "https://www.e-cology.com.cn/sp/doc/docDetail/125808419831955819")
