概述
对于展示多条记录的场景，如商品列表。每一条记录可能包含多种字段类型的数据，例如每一条记录中想要同时展示图片、标签、文本、数字等，并且这些内容之间的布局需要相对灵活。这种情况，可以通过列表组件实现。
配置方式
- 快速创建
拖动列表组件进入中间画布后，点击「列表生成器」即可以快速创建一个全新列表：
250px|700px|reset
250px|700px|reset
- 从 0 到 1 搭建
截图 | 说明 |
250px|700px|reset | Step1：先配置数据源（可以选择数据连接，也可以选择一个变量）
|
250px|700px|reset | Step2: 往列表中拖入组件， 绑定变量
嵌套的列表通过 ri 获取上一层级的当前行序号
|
属性的配置
截图 | 属性 | 类型 | 默认值 | 描述 |
250px|700px|reset | 数据 | Array<any> | [] | 通常绑定数据请求的 data { { query1.data } }，其值是一个数组 |
| 主键 | string | | 类似于 React 的 key，默认可不填 |
| 加载中 | boolean | false | 通常绑定数据请求的 loading { { query1.loading } }，当触发数据请求时，会出现 loading 效果 |
| 布局类型 | 列表｜网格 | 列表 | - |
| 布局方向 | 水平｜垂直 | 垂直 | 布局类型为列表时可配 |
| 列数量 | number | 3 | 布局类型为网格时可配 |
| 间距 | number | 0 | 列/网格间距 |
| 宽度 | | 适应 | - |
| 高度 | | 适应 | - |
| 内边距 | [top, right, bottom, left] | 0 0 | - |
| 外边距 | [top, right, bottom, left] | 0 0 | - |
| 隐藏 | boolean | true | - |
配置说明 250px|700px|reset 效果预览 250px|700px|reset | 选中项背景色 | object | #3370ff、8% | 用于定义列表项选中时的颜色 |
| 悬浮项背景色 | object | #1f2329、 8% | 用于定义列表项 Hover 时的颜色 |
事件的配置
列表项点击事件、列表加载更多事件（分页）均需要选择整个列表组件进行配置
250px|700px|reset
选中列表项时，也会引导你前往列表组件添加事件
250px|700px|reset
暴露的状态
属性名称 | 类型 | 描述 |
data | any[] | 列表的数据 |
primaryKey | string | 数据的唯一标识字段（例如 _id），用于表格批量选择、数据编辑、删除等场景 |
hidden | boolean | 是否隐藏 |
loading | boolean | 是否加载中 |
gap | number | 网格间距 |
layoutType | list | grid | 布局类型，列表 ｜ 网格 |
direction | vertical | horizontal | 列表布局时，布局方向 |
columnNumber | number | 网格布局时，列数量 |
暴露的方法
