大家好！我是海哥。欢迎阅读学习《海哥交互行》精品课程。

本节课和大家一起分享axure的中继器，中继器（英文名Repeater）是Axure RP 7.0推出的新功能，是目前为止Axure最复杂的功能。中继器可以看成是一个重复列表项的元件，在项目中我们会用在列表类型重复的样式中。一般在中继器配合动态面板，等操作的时候，会涉及数据逻辑，所以，不是太建议去使用中继器。而对于交互原型是需要快速产出展现我们的逻辑，所以对于这个相当于0.5的程序开发工作量，是并不适合我们去工作的。而对于一些重复列表样式的使用它就会比较方便来实现，就看我们如何灵活的去使用它。

案例

我会通过三个案例和大家一起来分享中继器在项目中常用的几个类别。

第一个相对于比较简单的，就是不需要任何的程序开发，只需要中继器的阵列模式展示框架，一种就是矩阵模式，多行多列。另一种就是系统默认的阵列，就是单列，多行展示。

第二个就是模拟商品购买页面，选择商品的供应商后，到下一个列表的传递。通过中继器把数据传递给一个页面。

第三个就是我们经常使用发微博的时候，文章发出后会最先展示出我们发过的内容。通过输入文字，以中继器传递数据的值。

中继器的功能操作及样式属性

1.1中继器在axure的元件库里面，我们可以通过拖拽到面板中，面板会默认展示一个一列三行的表格。通过双击可以对中继器进行修改编辑，从而添加自己想要的内容。

1.2 中继器的数据的参数修改可以通过属性，说明，以及样式面板进行修改。中继器有一个自带的数据集，而这个数据集列名必须为英文字母或者数字的组合，可以通过操作进行对选中的条目进行更改，或者通过右键选择操作。

1.3 中继器默认布局为垂直列表。我们可以在中继器的样式中对其布局属性进行修改，以达到我们想要的效果。间距可以设置两个子视图中间的距离。

案例讲解

1.1纯列表案例：首先我们需要根据样式画出原型的导航区域，从元件库中添加中继器元件到画板中，点击已经添加的中继器后跳转到中继器里面的页面。在这里我们去掉了默认的矩形，因为在这个页面我们可以随意的修改、添加、删除。通过添加元件得出我们需要的排版样式。

              添加中继器   

               填充内容

             暂未设置修改      

由于默认的只显示一列三行的状态，所以我们需要通过分别修改属性和样式来调整出我们想要的阵列。 设置参数如下图所示：

如果还需要往下细化，不过在交互原型中，我们也可以不需要这么复杂的操作，在这里就不在详细的解说，可以查阅视频观看详情的操作。最后得到的效果是：

2.2  选择项目-传递页：在这个案例中我们的主要思路是，先完成通过鼠标移入时选择一个供应商，从而传递到下一个列表操作。首先我们根据页面画出页面的排版布局，四个供应商图片我们用中继器完成。添加元件中继器，编辑进入到编辑页面，通过添加图片元件，并命名。以及添加一个无填充，无描边的背景。通过添加行，设置样式得到以下：

接下来我们需要给中继器中导入图片，给中继器命名zimg。右键中继器的其中一项，右键单击导入图片，分别导入四张图片。设置页面交互事件，加载时，设置图片，插入变量[[ltem.zimg]]。设置如下：

现在已经完成了整体的页面，需要给鼠标移入时添加一个状态。点击中继器进入到编辑页面，并给背景命名lnimg。我们需要给刚开始的背景以及图片添加一个移入时的交互事件。设置状态为值，true。

接下来就需要做页面的跳转了，我们需要增加一个页面。这个页面就是选择供应商后，页面需要跳转到该位置，并改变文字颜色。

我们需要给供应商图片添加点击交互事件。

在项目中我们还需要设置全局变量，添加变量newiphone。并返回到首页，还需要给中继器阵列添加表格，设置如下：

回到中继器内容编辑页面，编辑鼠标单击时，设置变量值[[ltem.carrier]]。

最后设置页面载入时的交互事件，设置文本。

最后预览下一下效果是否达到。

2.3  通过外围添加数据并做排序：案例中会分为多个层面，首先是通过外围的数据来添加中继器的数据，和前面的案例还是有点区别。另外一个就是排序的前后顺序。

下面我带大家一起来操作一遍，首先我们需要根据页面的元素画出原型图。并通过添加中继器完成下面文章列表。    

由于我们需要输入的数据包括名字、内容。所以，我们需要给出列分别命名排序zID、用户名zUser以及内容zContet。排序是会用倒序排列。并需要给预赋值。我们需要分别给中继器里面的内容相关元素命名分别为：InID、InUser、InContet。

接下来我们需要给页面设置交互，当没项加载时，设置文本为值，插入变量为[[Item.carrier]]。用同样的方法分别设置InID、InContent、InUser。

现在我们需要完成交互的添加，给作者名字输入框、文本输入框分别命名为exUser、exContent。中继器命名ZWeibow。为按钮添加点击交互事件，鼠标单击时在中继器中找到添加行。设置如下所示：

设置完上面的变量以后，发现排序并没有出现在最前面。这时候我们还需要为鼠标单击时添加排序。设置如下图所示：

最后预览一下效果

小结

通过本章节中继器的学习，我想大家能够对中继器有一定的认识了，通过三个实际案例的讲解我们能够基本的使用中继器。我们应该掌握了如何通过属相和样式去修改我们中继器，从而调整出我们想要的阵列。在纯列表案例中，我们可以看到这种场景下的中继器在一些项目中也是非常的使用和快捷。选择项目-传递页案例帮我们解决了在页面跳转传递数据以及如何运用中继器来完成图片的添加。最后通过微博发文章的案例我们学到了通过外围添加数据并做排序来结束了本章节的学习。