> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coze.cn/llms.txt
> Use this file to discover all available pages before exploring further.

瀑布流列表组件是一种以错落有致的多列形式展示数据项的布局工具，支持灵活地绑定数据和动态更新数据。瀑布流列表组件默认包含一个图片组件、一个容器组件和两个文本组件，你可根据业务需求自定义添加组件。

## 属性配置 {#748f9695}

瀑布流列表组件提供了丰富的属性配置选项，以下是一些关键属性配置说明。关于组件尺寸、位置、样式、指针、变换等通用属性的设置方法，请参考[设置组件属性和事件](/guides/set_properties_events)。

### 绑定数据源 {#85d1de9f}

瀑布流列表组件支持绑定静态数据，或通过绑定工作流获取动态数据。

1. 为瀑布流列表组件绑定一个 Array 类型的数据源。
   例如将工作流的输出变量（例如 `output`）作为列表组件的数据源，该输出变量必须为 Array 类型。绑定工作流后，需要配置事件以触发工作流的调用，确保数据能够动态加载。
   ::::cols
   @col 33
   **工作流输出变量**
   
   ![Image=237x244](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b441eff279df442f898300bf57ca928e~tplv-goo7wpa0wc-image.image)
   
   @col 33
   **绑定数据源**
   
   ![Image=288x317](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/273b52b25f584bbea831bc7a60f2df6a~tplv-goo7wpa0wc-image.image)
   
   @col 33
   **配置事件**
   
   ![Image=382x575](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ddeb67f57fa846d384ce038fa30ec686~tplv-goo7wpa0wc-image.image)
   ::::
2. 为瀑布流列表组件中的各个子组件绑定具体的数据字段。
   绑定数据源后，你可以通过 `item` 变量遍历和访问 Array 类型数据源中的每个元素。即你可以为列表组件中的各个子组件绑定具体的数据字段。例如为文本组件绑定数据字段 `{{item.name}}`，为图片组件绑定数据字段 `{{item.contentUrl}}`。配置示例，请参考[配置示例](/guides/waterfall_list_mini_program#a4a1ea1f)。
   :::tip 说明
   为图片组件绑定数据字段时，字段值需为图片地址，支持 `jpg`、`png`格式，暂不支持`svg`。
   :::
   ::::cols
   @col 33
   **item 变量**
   
   ![Image=292x178](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bbf9c443436f432c9f67e590afaea5cd~tplv-goo7wpa0wc-image.image)
   
   @col 33
   **为文本组件绑定数据字段**
   
   ![Image=294x158](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a6dc65baa7844b21ad7f087fe946c3f2~tplv-goo7wpa0wc-image.image)
   
   @col 33
   **为图片组件绑定数据字段**
   
   ![Image=295x209](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e25adcc75242453aafe48308b936293f~tplv-goo7wpa0wc-image.image)
   ::::   


### 设置列数及间距 {#e94a2432}

支持通过**列数量、列间距**、**行间距**设置每行展示的列表块数量以及列表块之间的间距，灵活调整瀑布流列表布局。

![Image=487x438](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/270702b6240e4d8994c4cfebb382c036~tplv-goo7wpa0wc-image.image)

### 调整组件 {#f10d09d1}

瀑布流列表组件默认包含一个图片组件、一个容器组件和两个文本组件。你可以根据业务需求，在瀑布流列表组件中自由添加其他组件或删除默认的子组件。当你在一个瀑布流中添加或删除子组件时，其他列表块也会同步完成相同的操作。

例如在瀑布流列表组件中，删除原有的文本组件，然后添加一个容器组件和一个图标组件。

![Image=296x279](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a51b0354285943d7ace3cd8994ed9017~tplv-goo7wpa0wc-image.image)

### 隐藏组件 {#314b3d5f}

瀑布流列表组件的可见性可通过设置常用条件或表达式灵活控制，以实现特定场景下的隐藏或显示。

* 表达式方式
   * 设置为 false：显示组件。
   * 设置为 true：隐藏组件。
   * 设置为变量：通过变量值（true 或 false）动态控制组件的可见性。配置示例，请参考[隐藏组件](/guides/set_properties_events#46d8e38f)。
* 常用条件方式
   支持通过可视化界面设置条件，以控制组件的可见性。
   例如添加一个单行输入组件（Input1）和一个瀑布流列表（WaterfallList1）组件，单行输入组件用于输入内容，瀑布流列表组件用于展示基于输入内容的搜索结果。为了实现瀑布流列表组件内的图片展示时，就隐藏单行输入组件，你可以在单行输入组件的**可见性**属性中，添加条件 `Image1.src 不为空`。当瀑布流列表组件内的图片展示时，条件 `Image1.src 不为空` 变为 `true`，单行输入组件将自动隐藏。   


::::cols
@col 50
**可见性配置**

![Image=380x215](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b7b4eadc5d814cd9b84058bc6bd5cd18~tplv-goo7wpa0wc-image.image)

@col 50
**图片加载完成后隐藏文本输入组件**

![Image=166x355](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2c852524dff9461a8b80e21a9d86ad6d~tplv-goo7wpa0wc-image.image)
::::

## 事件设置 {#5aaf4418}

通过配置瀑布流列表组件的事件，可以为瀑布流列表组件添加丰富的交互功能，以增强用户体验和界面的互动性。

<!-- @cols-width: 148,709 -->
|**事件项** |**说明** |
|---|---|
|事件类型 |支持以下事件类型： |\
| | |\
| |* 点击单元格时：当用户点击单元格时触发。 |\
| |* 加载时：当瀑布流列表组件完成加载时触发。 |
|组件方法 |设置隐藏：隐藏组件，使其不可见。 |

## 配置示例 {#a4a1ea1f}

例如使用**什么值得买**插件搜索人工智能书籍的价格及购买渠道，并在应用中以瀑布流形式展示搜索结果，则你可以按照以下步骤创建一个工作流，并通过瀑布流列表组件进行展示。

1. 创建工作流。
   使用**什么值得买**插件（smzdm_haojia_articles）搜索人工智能书籍。其中，在**结束**节点中，设置输出变量 `output` 的值为**什么值得买**插件中的 `Content_source` 变量。`Content_source` 变量为 Array 类型，内容为 `[{title: "书名1", item.digital_price : "价格1", item.focus_pic_url: "图片1"....}, ...]`。
   ![Image=679x220](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9f468038a1a24ec4963735ffc275c41a~tplv-goo7wpa0wc-image.image)
2. 绑定数据。
   1. 将工作流的输出变量 `output` 绑定到瀑布流列表组件上。
      ![Image=220x241](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/96f97fc80f544ab7ba8b3be32ca0a4bc~tplv-goo7wpa0wc-image.image)
   2. 为瀑布流列表组件添加**调用工作流**事件。
      例如配置事件为瀑布流列表组件加载时即调用工作流，搜索**人工智能书籍**。
      ![Image=233x368](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/12647d5ded7c4cb988e60faebec1f103~tplv-goo7wpa0wc-image.image)
   3. 为瀑布流列表组件中的图片组件（Image1）绑定数据字段 `{{ item.focus_pic_url }}`。
      `focus_pic_url` 为商品图片 URL。
      ![Image=271x263](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/15cc42dbe77341789892f541ffd24891~tplv-goo7wpa0wc-image.image)
   4. 为瀑布流列表组件中的文本组件（Text1）绑定数据字段 `{{ item.digital_price }}`。
      `digital_price` 为商品价格。
      ![Image=293x243](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/58eb3971b9ba41d1813626c1dd6c8880~tplv-goo7wpa0wc-image.image)
   5. 为瀑布流列表组件中的文本组件（Text2）绑定数据字段 `{{ item.desc }}`。
      `desc` 为商品描述。
      ![Image=295x208](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/27888e06bc44418a88a05ba36b8f614d~tplv-goo7wpa0wc-image.image)
3. 预览效果。
   以瀑布流形式展示搜索结果。
   ![Image=139x298](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/884ed59594324e9ebd53c14e5296e7ea~tplv-goo7wpa0wc-image.image)