跳到主要内容

列表容器

以指定的方式循环渲染列表数据。

经典案例：购物清单展示

何时使用​

  • 循环渲染列表数据
  • 列表项需要自定义，不能使用表格组件

功能演示​

假设有这样一份购物清单数据：

[
  { "name": "苹果", "price": 3.5, "quantity": 4 },
  { "name": "牛奶", "price": 6.0, "quantity": 2 },
  { "name": "面包", "price": 4.2, "quantity": 3 },
  { "name": "鸡蛋", "price": 0.8, "quantity": 12 },
  { "name": "洗衣液", "price": 18.0, "quantity": 1 }
]

必须完成以下这几个基础步骤，才能正确渲染数据：

  • 添加列表容器组件
  • 向列表容器传递数据，配置数据类型定义
  • 在插槽中配置自定义渲染内容，绑定字段

基础使用​

1.添加列表组件​

从组件库选择列表容器组件，配置容器尺寸，选择布局类型（这里我们选择纵向布局） 截图1

2.设置自定义渲染​

列表容器提供了插槽来放置自定义内容，我们将名称、价格、数量放置到插槽内： 添加一个自定义容器，在其中添加三个文本组件，样式可根据需要进行自定义。在后续步骤中，我们将对这三个文本进行数据绑定。

3.传递列表数据​

我们必须通过页面加载事件、某个页面组件的点击事件等外部事件来向列表容器传递数据，也叫设置数据源。在这里，我们在打开页面时通过JS计算组件来构造数据，并进行数据源设置。真实场景中通常会使用服务接口来加载数据。

3.1 打开页面时构造数据​

打开页面 为 JS 计算组件组件配置代码：构造数据并输出

({ outputs, inputs, logger }) => {
  const [inputValue0] = inputs;
  const [output0] = outputs;

  // 构造数据
  const list = [
    { name: "苹果", price: 3.5, quantity: 4 },
    { name: "牛奶", price: 6.0, quantity: 2 },
    { name: "面包", price: 4.2, quantity: 3 },
    { name: "鸡蛋", price: 0.8, quantity: 12 },
    { name: "洗衣液", price: 18.0, quantity: 1 },
  ];
  // 输出数据
  output0(list);
};
3.2 保存输出数据，设置数据类型​

创建一个变量： 创建变量 设置变量类型定义： 类型定义 将 JS 计算组件的输出连接到该变量，进行赋值： 变量赋值

3.3 设置数据源​

现在我们将有了类型定义的变量连接到列表容器，设置数据源： 设置数据源

4.绑定字段​

现在需要在自定义渲染内容中绑定数据字段：点击需要动态渲染的位置，在内容设置框右上角点击绑定，选择当前项的某个字段。 绑定字段 这样就实现了动态循环渲染的效果，每个数据项的样式可以根据需要自由调整。 最终效果

横向布局​

有些内容需要横向渲染，比如名称列表，此时可以在列表容器的配置项中选择布局类型为横向布局。 横向布局 注意：横向布局时需要配置是否换行，如果选择否，则会进行横向滚动。在某些情况下可能需要隐藏滚动条，这种小众样式配置需要使用代码配置：点击列表容器的样式配置，选择代码编辑 样式代码1 使用 CSS 代码来控制滚动条（选择器已自动配置好，直接写代码即可）： 取消滚动条

栅格布局​

栅格布局是将页面划分为若干行和列的布局方式，此时可以设置列数、响应式列数。

配置子项​

使用列表容器最重要的是配置子项：将当前项的数据配置到插槽内容上。 在交互面板里，选择列表容器 >> 插槽（列表项），然后就可以从“当前项”端口引出逻辑线，连接到对应的内容组件上，如图所示： 取消滚动条

如果当前项是对象，则需要从内容上进行字段绑定

完整配置​

尺寸和位置​

尺寸和位置

属性名称说明
宽可以设置宽度值、宽度适应内容或者宽度填充
高可以设置高度值、高度适应内容或者高度填充
位置默认为竖排，此时不支持设置位置；选择固定时可以设置左和上两个值

布局​

属性名称说明
纵向布局此时可以设置列表项宽度、列表项上下、左右间
横向布局可以设置是否换行：如果打开换行，数据项超出父容器宽度时会自动换行；如果关闭换行，则可以选择均匀排布或横向排布，此时列表项会横向滚动；横向排布时可以指定数据项宽度。
栅格布局此时容器会根据设置的列数分割为几行几列，还支持响应式设置：对不同的屏幕设置不同的列数

高级​

属性名称说明
获取列表数据开启后，可以通过逻辑连线连接列表容器的输入项【获取列表数据】，对应关联输出项【数据输出】会输出列表数据
loading开启后，可以通过逻辑连线连接列表容器的输入项【设置loading】，控制列表容器的loading状态
列表项数据唯一标识可不填，填写之后作为列表项数据的唯一标识

样式​

样式配置面板包含了选中元素的背景、边框、内边距、阴影等属性，对于列表容器这种组件，其列表项的样式也提供了这些配置项，具体因组件而异。 详见《基础必读》-组件配置