自定义列表

凡拓数创数字孪生 2025年6月3日 11:49

收藏文档

自定义列表提供极大的自定义功能，支持滚动动画，允许用户配置盒子、滚动条、每行以及每个子项的大小、位置、背景等，用户可绑定映射字段达到按状态控制样式等
效果案例：

![](/media/202506/2025-06-03_113819_0223420.06498067157960907.png)
## 样式
在样式中可以设置组件的基本属性、全局、行配置和子项配置。
### ①基本属性
图层名称：
图层的名称，会在页面左侧展示，允许重复
位置尺寸：
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
### ②全局
行数：
默认显示3行数据，在此可自由配置显示数据行数
行间距：
数据行之间间距。
偏移：
列表内容整体偏移量，X表示左偏移距离，Y表示上偏移距离。
动画：
列表轮播动画，向下滚动，可通过滚动延迟控制滚动速度，预览时，开启动画情况下，鼠标悬浮在列表上会暂停滚动，鼠标离开列表后列表会继续滚动
纵向滚动条：

![](/media/202506/2025-06-03_113841_7742970.6068923395359243.png)
预览时，开启动画情况下，鼠标悬浮在列表上会暂停滚动，但不可手动进行滚动，仅在关闭动画效果情况下可手动滚动
轨道：

| 粗细 | 滚动条背景轨道的宽度     |
|----|----------------|
| 颜色 | 滚动条背景轨道的颜色和透明度 |
| 圆角 | 滚动条背景轨道的圆角     |

滑块：

| 粗细 | 滚动条背景轨道的宽度     |
|----|----------------|
| 颜色 | 滚动条背景轨道的颜色和透明度 |
| 圆角 | 滚动条背景轨道的圆角     |

背景：

![](/media/202506/2025-06-03_114112_1863620.9326163459040426.png)

填充方式：
背景填充可选择颜色或者自定义。
颜色：
填充方式为颜色时展示，设置背景颜色。
图片
填充方式为自定义时展示，设置背景图片，可选择素材或者自己上传。
### ③行配置
表样式：

![](/media/202506/2025-06-03_114153_0279890.6772503839142755.png)
可以设置每一行的宽度、高度以及背景。
行宽：
每一行的宽度。
行高
每一行的高度。
行背景：
| 填充方式 | 背景填充可选择颜色或者自定义                 |
|------|--------------------------------|
| 颜色   | 填充方式为颜色时展示，设置背景颜色              |
| 图片   | 填充方式为自定义时展示，设置背景图片，可选择素材或者自己上传 |

选中高亮：

![](/media/202506/2025-06-03_114225_1359260.5084541072101262.png)

| 是否启用（右上角眼睛） | 选中高亮是否启用                       |
|-------------|--------------------------------|
| 填充方式        | 背景填充可选择颜色或者自定义                 |
| 颜色          | 填充方式为颜色时展示，设置背景颜色              |
| 图片          | 填充方式为自定义时展示，设置背景图片，可选择素材或者自己上传 |

鼠标悬停：

![](/media/202506/2025-06-03_114249_3777340.03133033923978479.png)

| 是否启用（右上角眼睛） | 鼠标悬停是否启用                       |
|-------------|--------------------------------|
| 填充方式        | 背景填充可选择颜色或者自定义                 |
| 颜色          | 填充方式为颜色时展示，设置背景颜色              |
| 图片          | 填充方式为自定义时展示，设置背景图片，可选择素材或者自己上传 |

行状态：

![](/media/202506/2025-06-03_114313_5168020.3755203166612646.png)
右上角可选择是否开启行状态，行状态可以设置数据里想要映射的字段，然后填写对应的状态值，如果命中该状态值则把背景改为改状态下的的背景。例如默认背景是白色，数据里有个字段叫status, 1的时候背景想要蓝色，则可以在映射字段填写status，然后新增一个状态，状态值填写1，填充方式选择颜色，然后设置蓝色即可。
映射字段：
填充值对应数据里的某个字段，会获取该字段下的值与状态值进行匹配。
状态值：
如果与数据里映射字段的值相等，则会使用该状态下的背景替代默认的行背景。

| 是否启用（右上角眼睛） | 行状态是否启用        |
|-------------|----------------|
| 映射字段        | 背景填充可选择颜色或者自定义 |

### ④子项

![](/media/202506/2025-06-03_114423_5696300.10351392722277575.png)
内容类型：
子项的内容类型可选择文字、图片、按钮。
是否映射：
开启映射，则能设置指定样式，需要填写字段名，然后在指定样式每项中填写对应的状态值，匹配上对应状态后，该指定样式则生效。例如想映射数据里的"姓名"，且设置姓名为"张三"的字体为红色其余默认白色, 则开启映射后可以在映射字段填写"姓名"，然后新增一个指定样式把字段值填"张三"，填充方式选择颜色，然后设置红色即可。
字段名：
开启映射后需要填写字段名，对应数据里的某个字段，用于映射数据。
文本内容：
内容类型为文字且没有映射时展示，设置展示的文本。
按钮文本：
内容类型为按钮时展示，设置按钮的文本。
层级：
该子项的层级，使用场景：文字底下放张图片，则文字的层级设置2，图片层级设置1。
位置/图片位置/按钮位置：
设置子项的位置。
宽度/图片尺寸/按钮尺寸：
设置子项的宽高（部分内容类型可能没有高度，例如文字类型高度由行距和文字大小决定）。
文字方向：
内容类型为按钮时可设置，文字可设置横排、竖排，分别对应水平对齐方式和垂直对齐方式。
对齐方式/水平对齐/垂直对齐：
子项内容的对齐方式。
文本样式：
内容类型为文字时可设置。
文字溢出：
内容类型为文字时可设置，文字溢出可设置换行、省略号、跑马灯这几种形式。
默认图片：
内容类型为图片时可设置。
样式指定：

![](/media/202506/2025-06-03_114440_1093820.10835108716134134.png)
在开启映射情况下可设置指定样式，匹配上对应的字段值/状态，则会使用该指定样式（覆盖默认样式）。
## 数据

| 字段 | 说明   |
|----|------|
| id | 唯一标识 |

![](/media/202506/2025-06-03_114510_0840620.5164335028012677.png)