- 首先简单介绍一个中继器以及其使用场景：其实中继器就是一个容器，我们需要做的就是往容器里装东西，然后给装的东西进行赋值。中继器的使用可以帮助我们完成一些简单的、需要重复的原型设计，同时，想实现一些高保真原型图也会用到中继器。
- 接下来，看一下我用中继器实现的效果（效果本身很简单，主要是讲解其使用原理，看懂这篇文章，中继器的基本原理就懂了）。
- 原件准备：一个水平菜单栏，一个中继器。
- 双击进入中继器，我们把其自带的矩形删除，然后放入一个一行四列的表格，表格的第一列命名为“TheName”，第二列命名为“TheSex”，第三列命名为“TheAge”，第四列命名为“TheIntroduce”。（这里说明一下，之所以会给表格的各个列命名是为了后续方便在各个列里面进行赋值）。
- 接下来，我们在这个数据表里进行具体数据的赋值。
- 如图，数据表的第一排，我分别命名为“name”、“sex”、“age”、“introduce”,名称是给该列数据一个统一ID，在同一名称下面的数据拥有相同的属性；下面的表格就进行具体数据的填写，譬如“name”下面就用来填写具体的名字。
- 接下来，就是将数据表中具体的数据放入到中继器里面一列四行的表格中去。 具体如下：点击右侧交互部分每项加载中的设置文本，进入如下界面（这里需要用到该界面里的“目标”和“值”）。之前不是给中继器里面一行四列的表格里面的各列命名了嘛，现在分别要往里面放数据，因此这里的目标就分别选它们四个，譬如，这里的目标就选择“TheName”。
- 点击“值”处的函数图标"fx"。
- 进入如下界面，点击“插入变量或函数”，选择里面的函数“[[Item.name]]”。注意：之前在数据表中填写数据时，第一行第一列命名为“name”,这里将“TheName”设置函数为“[[Item.name]]”的意思就是将“name”下面的数据赋值给“TheName”。
- 最后，将“[[Item.age]]”赋值给“TheAge”；“[[Item.sex]]”赋值给“TheSex”；“[[Item.introduce]]”赋值给“TheIntroduce”；实现下图效果。
- 如果你还想增加一行数据，就在数据表中“小白”后面，自行添加行填写数据哦！
支付宝扫一扫
微信扫一扫
