> ## 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.

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

## 属性设置 {#d6df8334}

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

### 绑定数据源 {#d14814f2}

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

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=269x229](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/156c4179a27d40e193d4ead5f78b99e6~tplv-goo7wpa0wc-image.image)
   
   @col 33
   **配置事件**
   
   ![Image=340x532](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/991b8f865f2c4ebaa776a3ffdab352ff~tplv-goo7wpa0wc-image.image)
   ::::
2. 为纵向列表组件中的各个子组件绑定具体的数据字段。
   绑定数据源后，你可以通过 `item` 变量遍历和访问 Array 类型数据源中的每个元素。即你可以为列表组件中的各个子组件绑定具体的数据字段。例如为文本组件绑定数据字段 `{{item.name}}`，为图片组件绑定数据字段 `{{item.contentUrl}}`。具体示例，请参考[配置示例](/guides/list_web#4db0cf15)。
   :::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=293x156](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0f7699f4cc01480998cc697729b3d142~tplv-goo7wpa0wc-image.image)
   
   @col 33
   **为图片组件绑定数据字段**
   
   ![Image=291x210](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/080a4c2c9f6941549e2ce14df7a02432~tplv-goo7wpa0wc-image.image)
   ::::   


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

支持通过**间距值**设置每个列表项之间的间距。

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

### 调整组件 {#5135529b}

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

例如在纵向列表组件中，删除原有的文本组件，然后添加一个图标组件。

![Image=293x241](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9cfce0b5b4dd4f4a8ef738b16c93387b~tplv-goo7wpa0wc-image.image)

### 指针设置 {#c3be7b55}

配置鼠标在指定组件区域内的指针样式。

你可以选择**根据元素类型自动显示**，也可以指定某一特定的指针样式。

::::cols
@col 50
**属性配置项**

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

@col 50
**效果图**

![Image=234x175](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/fc3d8dd3934c454cb5fc83fda3b84299~tplv-goo7wpa0wc-image.image)
::::

### 隐藏组件 {#58fe56b4}

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

* 表达式方式
   * 设置为 false：显示组件。
   * 设置为 true：隐藏组件。
   * 设置为变量：通过变量值（true 或 false）动态控制组件的可见性。配置示例，请参考[隐藏组件](/guides/set_properties_events#46d8e38f)。
* 常用条件方式
   支持通过可视化界面设置条件，以控制组件的可见性。配置示例，请参考[隐藏组件](/guides/set_properties_events#46d8e38f)。   


## 事件设置 {#5c0158a3}

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

<!-- @cols-width: 148,709 -->
|**事件项** |**说明** |
|---|---|
|事件类型 |支持以下事件类型： |\
| | |\
| |* 点击单元格时：当用户点击列表组件中的单元格时触发。 |\
| |* 加载时：当组件完成加载时触发。 |
|组件方法 |支持以下方法： |\
| | |\
| |* 滚动到视图：将组件滚动到可视区域内。 |\
| |* 滑动单元格到视图：自动将当前活动的单元格平滑地滚动到可视区域内。 |\
| |* 设置隐藏：隐藏组件，使其不可见。 |

## 配置示例 {#4db0cf15}

例如需要搭建一个新闻播报网页，则你可以创建一个搜索新闻的工作流，并通过纵向列表组件来展示新闻搜索结果。该组件的每个列表项都可根据绑定的数据动态展示对应的新闻标题和内容。

1. 创建工作流（list2）。
   使用**头条新闻**插件（getToutiaoNews）搜索新闻。其中，在**结束**节点中，设置输出变量 `output` 的值为**头条新闻**插件输出结果中的 `news` ，其为 Array 类型，包括新闻的标题、时间、图片、链接等信息。
   ![Image=816x214](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/08c43a6da8ce4663be574d1f0a3dcf5f~tplv-goo7wpa0wc-image.image)
2. 搭建网页。
   搭建一个新闻播报网页，当你输入搜索内容，单击**搜索新闻**后，纵向列表中将展示搜索到的新闻内容。
   ![Image=769x535](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/47152f4d721746a686485886c8c6a07c~tplv-goo7wpa0wc-image.image)
3. 为按钮组件（Button1）配置事件。
   单击**搜索新闻**按钮时，将调用工作流（list 2）搜索新闻。工作流的输入参数 `input` 引用单行输入组件（Textarea1）的值。
   ![Image=230x348](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/93e413a99d164ac3b25f76d5f44079a9~tplv-goo7wpa0wc-image.image)
4. 为纵向列表绑定数据。
   1. 将工作流（list2）的输出变量 `output` 绑定到纵向列表组件上。
      ![Image=299x245](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1f99d024325f439486a1f6a59103f029~tplv-goo7wpa0wc-image.image)
   2. 为纵向列表组件中的图片组件绑定数据字段 `{{ item.cover }}`。
      `cover` 字段值为新闻相关的图片 URL。
      ![Image=303x286](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3b392141df494c0bb6eed114cc61a90a~tplv-goo7wpa0wc-image.image)
   3. 为纵向列表组件中的文本组件（Text3）绑定数据字段 `{{ item.time }}`。
      `time` 字段值为新闻时间。
      ![Image=302x210](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/13e7eb7d6cb14e74ae07a5ca6febd920~tplv-goo7wpa0wc-image.image)
   4. 为纵向列表组件中的文本组件（Text4）绑定数据字段 `{{ item.summary }}`。
      `summary` 字段值为新闻内容。
      ![Image=294x209](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f3b16f99df224933bf52c075455b4a71~tplv-goo7wpa0wc-image.image)
5. 预览效果。
   输入`搜索本月的科技新闻`，单击**搜索新闻**后，页面中将以纵向列表形式展示搜索到的新闻。
   ![Image=546x306](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/68d6136c644c44b2902b78e678418801~tplv-goo7wpa0wc-image.image)