一级标题中继器作为复杂的元件，存在的理由只有一个：制作“高保真”的动态原型

让我们再来思考一下“高保真”原型的2个核心：

1、视觉保真度

2、交互保真度

视觉保真这个比较容易实现，只要原型和实际的UI图1:1的展示，就可以实现，但想要“交互保真”这里难度就要高的多了。

例如碰到如下情况，制作起来就非常复杂了：

1、toB产品中“表格”的交互动作，增、删、改、查、排序，翻页等数据功能的展示。

2、APP产品中“列表”“信息流”等样式的多样性数据展示，翻页与加载效果等。

这些“多数据”动态交互的效果，使用“中继器”是很容易实现的。

一个中继器由如下3个部分构成：

1、样式：展示数据的载体。

2、数据：需要展示/操作的数据。

3、动作：操作数据的动作。

样式如下：（运行效果看文章结尾）

1、设计“样式”：

①在绘图区域中添加一个中继器，同时也添加一个顶部筛选文字和背景

②双击刚才添加的中继器元件，进入item界面编辑，这里编辑的内容相当于列表中的每一个条目，对着刚才的截图，添加【图片】【商品】【价格】【销量】等标签，并同时对元件进行命名，方便后续配置数据，这里我们命名photo，name，price，sales。

③编辑后，返回上一层页面，确认一下列表样式是否需要修改，这里暂不需要修改。

2、填充“数据”：

①选中中继器元件，在右侧的PROPERTIES（属性）中找到中继器一项，填充想要的数据到列表中。

这里的数据可以手动一个个添加，也可以直接在excel中编辑好，整体复制过来。

数据中，图片数据需要进行【导入】，在图片列上单击鼠标右键，弹出的菜单中选择【导入图片】

导入后，列表中信息如图所示，至此所需的数据绑定完毕。

3、连接“动作”：

①首先我们连接“数据”与“展示”，选中中继器，双击右侧的onItemLoad事件，进行配置。

设置动作 Set Text -->sales -->fx（绑定数据与界面展示）

清空原有代码内容，点击【插入变量】连接，弹出的下拉框中选择【item.sales】（此处为数据中设置的列名）

顺序将其他2个中继器中item的文字元件都配置上对应的数据列名。

配置完文字之后，咱们配置图片，操作为：set image--->选择default值为value--->fx配置变量为 item.photo（图片列）

配置好后咱们预览一下，可以看到结果，图片文字均正常展示

最后咱们来配置动作，这里为了演示，咱们只有两个动作【销量排序】【价格排序】 首先，选中顶部的【销量】文字，添加事件onClick，弹出的事件编辑器中增加。

弹出的事件编辑器中，添加Add Sort事件，并在右侧的属性中选中Repeater，属性为sales，排序选为升序，设置结束后点击ok保存。

同样的对【价格】进行同样的配置和操作，配置信息如下。