布局类组件

布局类组件作为容器，负责页面排版与子组件的组织展示。

本篇手册按组件结构化列出：定义（含基础使用场景）、个性化配置、数据源配置、行为触发器及特殊限制说明（各组件按需呈现相应章节）。

本篇只列出各组件的专属配置、数据源配置和行为配置。位置、尺寸、布局、样式、文本等通用设计字段见设计面板参考。

通用说明

布局类组件是容器：在组件边界内提供一个或多个子画布。拖入其中的组件会成为其子节点，并遵循父容器的排版与对齐设置。

包含组件与核心属性

组件名称	支持的客户端	数据源配置	行为配置	对应的布局模式
视图	网页端、微信小程序、移动端 App	—	✓	基础容器
列表	网页端、微信小程序、移动端 App	✓	仅列表项 ✓	循环渲染
标签栏	网页端、微信小程序、移动端 App	—	仅标签页 ✓	视图切换
条件容器	网页端、微信小程序、移动端 App	—	仅分支 ✓	逻辑分支

视图

组件定义

最基础的布局容器。用于将多个组件进行编组、统一设置 Flex 弹性对齐、开启局部滚动，以及配置悬停状态样式等。

⌨️ 快捷创建：F

个性化配置项

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	说明
折叠模式	`枚举`	`无` / `折叠` / `展开`	仅微信小程序	控制组件的初始化高度形态。常配合前端动作「设置折叠模式」执行局部菜单的收起展开。
折叠高度	`长整数`	默认空（单位像素）	仅微信小程序且折叠模式非「无」	设定折叠模式下的初始限制显示高度，溢出该高度的子元素将被隐藏。
编辑状态	`枚举`	`常规` / `悬停`	仅网页端支持悬停配置	分别配置「常规」和「悬停」两种状态下的样式。
转换成条件容器	-	-	全平台	点击后将视图转换为条件容器。转换后该组件会放置在布局流的最后。

行为配置

支持的触发器包括：点击时、悬停时、进入可视区时、在可视区内滚动时。详细触发规则请参考：触发器参考。

列表

组件定义

列表组件用于展示一组结构相同、内容不同的记录，例如商品列表、评论列表、消息列表。你只需设计一次 列表项 模板，运行时列表会按数据源返回的记录逐条渲染。列表支持纵向/横向排列、网格布局、轮播、加载更多和下拉刷新。

个性化配置项

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	说明
方向	`枚举`	`纵向` / `横向`	全平台	控制列表项是纵向排列并上下滚动，还是横向排列并左右滑动。切换方向时，编辑器会同步调整列表组件的长宽比例，便于继续编辑。
列数	`长整数`	1	纵向模式、轮播关闭时	纵向布局中每行显示的列表项数量。固定时使用填写的列数；自动时，系统会根据列表容器在当前断点下的可用宽度、列表项卡片宽度和列间距计算每行可容纳的列数，容器宽度或断点变化后会重新计算。自动模式下无需手填列数。
行数	`长整数`	1	横向模式、轮播关闭时	横向布局中每列显示的列表项数量。固定时使用填写的行数；自动时，系统会根据列表容器可用高度、列表项卡片高度和行间距计算每列可容纳的行数。自动模式下无需手填行数。
行间距	`长整数`	默认空（单位像素）	全平台	相邻列表项之间的垂直间距。
列间距	`长整数`	默认空（单位像素）	列数大于 1	网格布局中相邻列表项之间的水平间距。
表头	`布尔值`	`false`	全平台	开启后在列表顶部增加独立的表头子画布。表头只渲染一份，不会随数据行重复；滚动列表时，表头会吸附在列表可视区域顶部。
轮播	`布尔值`	`false`	全平台	开启后列表以轮播方式展示数据，列数或行数会锁定为 1。
自动播放	`布尔值`	`false`	开启「轮播」时显示	控制轮播图是否自动轮播。
循环	`布尔值`	`true`	开启「轮播」时显示	轮播到最后一页后，是否循环衔接至第一页。
指示器	`布尔值`	`true`	开启「轮播」时显示	是否在轮播容器底部显示分页指示点。

列表加载配置项

注：此配置项点击个性化配置下的加载设置（齿轮图标）即可弹窗配置。

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	说明
刷新时滚动到底部	`枚举`	`从不` / `总是` / `手动刷新时` / `自动刷新时`	全平台	控制列表刷新后是否自动滚动到底部。常用于聊天、日志等需要查看最新内容的场景。
反向加载	`布尔值`	`false`	全平台	默认向下滚动加载更多；开启后改为向上滚动加载更多，常用于从底部向上查看历史消息的列表。
保留子组件状态	`布尔值`	`false`	全平台	列表数据刷新或重新请求时，是否保留列表项内输入框等组件的临时状态。

数据配置项

注：此配置项集成在右侧面板独立的「数据」标签页中。

属性名称	预期数据类型	默认值 / 可选项	说明
数据源	`数据集`	默认空	绑定列表要循环展示的数据。选择数据表查询/订阅时，可继续配置筛选、排序、去重和限额；选择「订阅」时会开启实时同步，并自动关闭「下拉刷新」与「加载更多」。
筛选条件	`表达式`	默认空	指定数据源的过滤逻辑。若筛选条件依赖的变量为空，列表可能返回未过滤的数据；数据量较大时，应先配置必要的筛选条件。
排序	`枚举`	默认空	指定列表数据的排序规则。
去重	`布尔值`	`false`	开启后，重复记录在列表中只展示一条。启用去重时，排序字段需与去重字段保持一致。
限额数量	`长整数`	默认空	单次请求最多返回的记录数量。
加载更多	`布尔值`	`true`	限制列表拉取不为零时
下拉刷新	`布尔值`	`false`	全平台

⚠️

列表数据与加载核心避坑指南：

加载更多失效：列表高度设为「适应内容」时，列表没有固定高度和溢出滚动区域，页面无法判断用户是否滚动到底部。若需启用加载更多，请将列表高度设置为固定像素值或百分比。
筛选值缺失：筛选条件依赖的变量为空时，列表可能返回未过滤的数据。例如按城市筛选但用户尚未选择城市，列表可能展示任意城市的数据；如果限额数量为 1，则可能只返回任意一条记录。

行为配置

列表容器本身不支持配置行为，列表项 支持配置行为。需要点击、跳转、弹窗等交互时，可直接在 列表项 上配置行为；行为中可以使用当前行的 列表项 和索引数据。

子组件

列表在结构树中包含 列表项 和表头两类子画布。列表项负责按数据源记录循环渲染；表头是可选的吸顶区域，只在开启表头后出现。

列表项

列表项是列表的循环模板画布。你只需在其中设计一次卡片样式，例如图片、标题、价格和按钮的组合；运行时系统会按「数据」标签页中数据源返回的记录数量，自动渲染出多份相同结构、不同内容的列表项。

样式编辑：在结构树中展开列表组件，双击 列表项 进入子画布。列表项内组件的排版、尺寸和样式会作为每条数据的展示模板。

自动排列：当「列数」或「行数」设为自动时，运行时会根据列表容器的可用宽度/高度、列表项卡片宽度/高度以及列间距/行间距，计算每行或每列能排几个列表项。若同时开启「填充剩余宽度/高度」，当当前行/列仍有剩余空间时，系统会拉伸列表项的宽度或高度，使这一行/列填满列表容器的可用宽度或高度。

数据绑定：进入列表项子画布后，子组件绑定数据时应使用当前行上下文，而不是整表数据：

内置字段	含义	示例
列表项	当前行对应的数据对象	`列表项.名称`、`列表项.price`
索引	当前行在列表中的序号，从 0 开始	`索引 + 1` 显示为第 1、2、3… 行

列表项 本身可配置 点击时 等行为；如果在列表项内部的按钮、图片等组件上单独配置行为，也可以同样使用当前行的 列表项 和索引数据。

表头

表头是列表顶部的独立子画布，需在个性化配置中开启表头后才会出现。

展示规则：表头区域内的组件只渲染一份，不会随数据源记录条数重复。用户滚动列表内容时，表头会吸附在列表可视区域顶部，适合放置筛选、分类、列标题等需要持续可见的内容。

如何编辑：开启表头后，在结构树中双击表头进入子画布，拖入需要吸顶展示的组件。

适用场景：分类与筛选栏、列标题行、批量操作工具条、活动说明横幅等只需出现一次、不必每条记录都重复的内容。表头内组件通常绑定页面变量、筛选条件或静态内容；若需展示某条记录自己的字段，应放在 列表项 中，而不是表头。

标签栏

组件定义

标签栏组件用于在同一页面区域内切换展示多组内容，例如订单状态、商品分类、信息分组等。每个标签页对应一个独立的子画布；用户点击标签后，标签栏会显示对应子画布内容。

个性化配置项

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	说明
模式	`枚举`	`默认` / `自定义`	全平台	「默认」使用系统标签样式；「自定义」会生成选中态和未选中态两个标签样式子画布，可分别设计标签被选中和未选中时的展示效果。
默认标签索引	`长整数`	0	全平台	页面打开时默认激活的标签下标，从 0 开始。支持数据绑定；当绑定值为空、为负数或超过标签数量时，会回到第 0 个标签。
标签页	`数组`	初始 2 个标签页	全平台	管理标签页标题和顺序。标签标题支持修改；标签页可新增和拖拽排序。初始的前两个标签页不可删除，新增的标签页可删除。
切换时保持状态	`布尔值`	`true`	全平台	切换到其他标签后，是否保留未显示标签页内组件的临时状态，例如输入框内容、列表滚动位置等。

行为配置

标签栏父组件本身不支持配置行为，标签页子画布 支持配置行为。需要点击、跳转、弹窗等交互时，可在对应标签页子画布上配置行为，也可在子画布内的具体组件上配置行为。

子组件

标签栏包含两类子画布：

标签页子画布

每个标签页对应一个独立子画布。双击某个标签页即可进入对应画布，放置该标签页下要展示的内容。标签切换时，当前标签页子画布显示，其他标签页子画布隐藏。

自定义标签样式子画布

当模式设为「自定义」时，标签栏会使用两个样式子画布：选中态标签 和 未选中态标签。你可以分别设计标签在选中和未选中时的样式，例如文字颜色、背景、下划线或图标组合。

条件容器

组件定义

条件容器组件用于在同一页面区域内维护多组互斥内容，并根据条件结果显示其中一组。适用于登录/未登录、不同角色权限、不同业务状态等需要切换整块 UI 的场景。

个性化配置项

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	说明
切换时保持状态	`布尔值`	`true`	全平台	条件切换导致某个分支隐藏后，是否保留该分支内组件的临时状态，例如输入框内容、表单数据、列表滚动位置等。

条件分支

条件容器的每个分支都对应一个子画布和一个显示条件。

配置项	类型	默认值 / 规则	说明
条件分支	`数组`	创建时包含 1 个普通分支和 1 个初始化分支	可新增、删除、拖拽排序。每个普通分支都对应一个子画布。
条件表达式	`布尔表达式`	普通分支默认为「总是」	条件为 `true` 时，该分支可被显示。建议把更具体的条件放在更靠前的位置。
初始化分支	`默认分支`	内置且不可删除	用于数据未就绪、条件尚未完成判断等初始化状态。初始化分支不支持条件配置。

更多说明：

条件分支可拖拽排序，排序越靠前的分支优先级越高，多个条件都可能成立时，靠前的分支优先显示。
如果条件容器的高度设为「适应内容」，切换分支时，容器高度会随当前显示分支的内容变化。
如需通过按钮主动切换分支，可在按钮等组件上配置「切换视图条件」行为，目标选择对应条件容器和分支。

行为配置

条件容器父组件本身不支持配置行为，条件分支子画布 支持配置行为。需要点击、跳转、弹窗等交互时，可在对应分支子画布上配置行为，也可在分支内的具体组件上配置行为。

子组件

条件容器包含多个条件分支子画布，其中包括内置的 初始化分支。双击某个分支即可进入对应子画布，设计该条件下要展示的内容。