循环渲染

对于需要循环渲染的场景，我们提供了循环数据的配置项，通过绑定变量我们方便实现循环渲染。

属性配置

在每个组件的属性设置中有一个循环配置项，用于控制组件的循环渲染

使用案例

下面我们用一个简单的例子来介绍如何通过循环数据来展示学生期末考试成绩。

• 在页面变量中创建students变量，用于存储学生相关信息，如下图所示：

查看代码 (students变量)

[
  {
    "name": "张三",
    "subjects": [
      {
        "title": "语文",
        "score": 95
      },
      {
        "title": "数学",
        "score": 85
      },
      {
        "title": "英语",
        "score": 92
      }
    ]
  },
  {
    "name": "李四",
    "subjects": [
      {
        "title": "语文",
        "score": 75
      },
      {
        "title": "数学",
        "score": 84
      },
      {
        "title": "英语",
        "score": 99
      }
    ]
  },
  {
    "name": "王五",
    "subjects": [
      {
        "title": "语文",
        "score": 94
      },
      {
        "title": "数学",
        "score": 99
      },
      {
        "title": "英语",
        "score": 100
      }
    ]
  }
]

• 在页面中拖入一个容器组件并且绑定循环数据students，循环变量设置为studentItem，循环索引设置为studentIndex，如下所示：

完成循环设置后，在循环主体内部的组件可以通过以下两个注入上下文获取循环数据内部的结构：

studentItem 获取当前行的循环数据

studentIndex 获取当前行的循环索引（从 0 开始计数）

• 在容器中拖入一个标题组件用于绑定学生姓名 (name) ，如下所示：

通过预览，可以看到学生姓名已经循环渲染出来了。

• 接下来我们需要展示学生的各个科目的成绩。在容器中继续拖入一个文本组件，并且绑定循环数据studentItem.subjects，循环变量设置为subjectItem，循环索引设置为subjectIndex，如下所示：

• 文本组件的文本属性绑定变量为subjectItem.title + ':' + subjectItem.score，通过页面预览，可以看到考试科目成绩也循环渲染出来了。