中继器的使用说明

什么是中继器

中继器是Axure的高级组件，可以实现非常多的“数据交互”效果，因为它做起来相对复杂一些，导致很多同学虽然使用Axure多年，但仍然不会使用它，今天我就给大家分享一个“快速入门”的方法。

一，首先我要吐槽一下“中继器”这个名字的翻译。

我一直认为这是个翻译错误，导致很多朋友不能理解这个元件的真正作用。

英文版的Axure中名字叫“Repeater”，谷歌翻译如下：

可以明显看出来，准确的解释应该是“重复器”，而不是作为硬件设备的“中继器”，因为中文里“中继”和“重复”这两个词意思差别太大。

我们再看一下Axure官方的说明，里边明显也是“重复”的意思。

如果翻译为“重复器”的话，相信大家应该不难理解它的用处了吧，就是用来“展示某些重复数据”的元件。当然，为了大家认知上的一致性，我们这里还是叫“中继器”，方便大家理解一致。

二、咱们聊一下“中继器”在实际工作中的作用。

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

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

1、视觉保真度

2、交互保真度

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

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

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

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

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

三、“中继器”的结构说明

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

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

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

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

下边举个实际的例子来说明，例如淘宝的APP端，如下图：

1、样式：列表中item的样式，图片位置，文字位置。

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保存。

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

配置结束后，运行预览，可以看到点击效果。

喜欢请点赞，有问题请留言欧~~