Axure8系列教程 | 中继器最佳实践

中继器通俗的解释就是一个小型的数据库，可对数据进行增加、删除、排序等操作。

关于中继器，我们重点讲解一个实际应用的例子，以某移动网站宽带专区为例，用户可在该专区内新装或续约宽带，通过查询条件过滤出自己想要的套餐。

这是一个最佳实践教程，会综合应用axure的知识。

点击下方阅读原文下载源文件

先看看该网站的实际截图：

页面上的功能说明：

1）  选择城市、速率、类型可以进行过滤

2）  宽带套餐信息显示的内容有速率、套餐简述、套餐价格、办理人数及立即抢购按钮

3）  鼠标经过宽带端口信息时会显示半透明窗口，显示套餐的详细描述信息

4）  点击立即抢购按钮进入套餐详情页面。

我们就以实现上面的功能为目标，体验中继器的使用方法。

示例场景：宽带专区套餐查询与过滤，为了演示方便，只设置部分地市

示例步骤：

1）  从生产环境上截图，获取图标（这是常用的方法，有的图标我们不需要自己来做，直接截图，或者图片另存为拿来使用）

2）  设置好文字标签

3）  地区、速率、类型选择按钮：几个按钮样式一致，设置一个后，其它复制

a）添加一个矩形，调整好大小和圆角

b）右键单击矩形设置交互样式，需要设置鼠标经过和选中的样式，截图当前默认选中的合肥，粘贴到设计区域，目的是为了获取颜色值

先设置鼠标悬停时的样式：边框为橙色

再设置选中状态下字体颜色和填充颜色，选中状态下按钮无边框，注意去掉：

设置选中样式的填充颜色值为橙色，通过颜色吸管获取颜色值，这是一个很实用的技巧哦，一定要熟悉！

设置好样式后，把截图粘贴过来的图片删除掉。

c）下面就是一个从1到N的复制/粘贴过程，下面的样式也准备好，添加个中继器（命名list）

d）F5预览，发现城市、速率、类型没有默认选中的样式，右键设置一下即可

再次F5看看效果：

4）  开始准备中继器数据

因为我们只是个原型，所以数据不必太多，场景覆盖到的数据有就行了。

5）  设置中继器内容项的样式

重点，这里要根据数据项设置元件的具体显示值，并要设置好布局样式

a）设置每项数据布局

双击中继器，进入中继器设置界面，添加相关标签和按钮，设置好样式，并给要显示的标签命名，便于后面赋值。

b）设置中继器样式

返回中继器上一层，设置一下样式属性，水平每排显示4个，水平和垂直间距为10，预览图看起来像个样子了，但是因为没有给标签赋值，所以数据看起来一个模样：

c）设置事件

开始设置事件，设置每个标签中要显示的内容：

确定后设计界面会同步变化，这次更接近真实数据了：

d）鼠标经过时样式

设置鼠标经过图片(占位符部分)时，显示半透明遮罩层：

半透明遮罩层组成：一个矩形，和后面的图片大小一致，设置填充色为黑色，透明度为50%；一个圆角虚线矩形显示速率（命名txtSpeed2），下方一个文本标签显示套餐详情（命名txtDesc2），将这个半透明遮罩层右键转换成动态面板，命名为mask，设置它初始状态为隐藏。

向前面一样，在中继器加载时，设置txtSpeed2和txtDesc2的值：

下一步是添加事件处理，在鼠标移入图片时，显示遮罩层，添加向上滑动的动画效果：

显示了遮罩层后，鼠标再次移出遮罩层时，我们需要隐藏遮罩层，并添加向下滑动的动画效果：

到这里，中继器本身的布局样式、数据、事件处理都设置完了，F5预览一下效果。

6）  地区、速率和类型的过滤处理

现在我们回头开始设置选择不同的地区、不同速率、不同类型是展示对应的数据。

a）处理单选效果

选中“合肥”按钮，设置OnClick事件(每个按钮要命名)：

重要：事件里先取消选中所有同组按钮，再设置当前按钮为选中状态，这样就达到单选的目的了。

复制按钮合肥的事件到其它地区(安庆、蚌埠)的按钮上（事件可以复制粘贴的）

b）单击“合肥”过滤出合肥的数据

先移除地市的其它过滤条件，再添加过滤合肥（命名hefei）的条件，其它两个地区设置类似。

和地区过滤一样，设置速率过滤时，注意不要删除了地区的过滤，因为和地区的过滤是并存的，只需要删除同类条件（其它速率）即可：

设置速率的“不限”条件时，只删除速率的三个条件。、

小结

中继器是个比较复杂的元件，有时我们可能根本就不需要这样的元件，我们只要能向用户解释出我们的需求即可。几句话其实也能解释清楚，毕竟做中继器的过滤这样的操作还是比较复杂的，花的时间过多可能偏离我们使用原型的本意了。