跳到主要内容

循环容器

用于遍历组件。

何时使用​

  • 列表数据展示
  • 表单字段动态生成
  • 表格数据渲染

一、属性​

1. 数据源​

详见 数据绑定。

2. 外观​

image-20250709093034467

1）排列方式​

排列方式分为水平和垂直两种。

  • 水平：组件在水平方向上排列，如下图所示。

    image-20250709093248999

  • 垂直：组件在垂直方向上排列，如下图所示。

    image-20250709093323798

2）间隔​

间隔：设置循环容器内组件之间的间距，如下图所示。

image-20250709093426182

image-20250709093527111

3）自动换行​

自动换行：当间距过大时，容器水平方向或者垂直方向不能容纳时，开启自动换行，容器内的组件会换行，而不会被挤压变形，如下图所示。

image-20250709093930149

3. 状态​

无特殊状态，详见 通用状态。

二、样式​

无特殊样式配置，详见 通用样式。

三、常见使用场景​

1. 按钮组​

在操作界面，可以使用循环容器动态控制控制键。

image-20250709094507226

2. 表单字段动态生成​

在登录页面或者注册页面中，使用循环容器可以快速生成表单。

image-20250709095741665

3. 标签分类​

在移动端输入框下面的热门推荐场景中，可以使用循环容器循环渲染标签。

image-20250709095024134