中继器的应用（1）
中继器，英文名称“Repeater”。
如何理解这个元件？它的主要用途是什么？
四个字：做列表的。
例如，下面这样的商品列表。
还有下面这种统计列表。
当然，列表的形式还有很多种，例如邮件列表、文章列表等等。
列表虽然有不同的形式，但是它们都有共同的特性。
这个特性就是列表中每一项都是相同的组成结构。
换句话说，列表就是将一个列表项重复了多次。
英文“repeate”是重复的意思，所以中继器“Repeater”有重复的特点。
那么，如何使用中继器实现一个列表？
分为四个步骤。
一、创建列表项模板。
在画布中放入一个中继器元件，双击元件进入模板编辑区。
删除编辑区中自带的矩形元件。
在《常用样式设置（3）》中，我们已经制作过相同的列表项，把做好的列表项粘贴到当前编辑区中。
然后，将列表项摆放在原点（0,0）的位置上。
另外，还要将标题与描述元件命名为“商品信息”，价格元件命名为“价格按钮”，折扣文字元件命名为“折扣”。
再将“折扣”文字与折扣图片组合，命名为“折扣图标”。
这样，就完成了模板的内容。
关闭编辑区回到页面中，我们能够看到，模板被重复了3次，出现了三个相同的列表项。
为什么是重复出三项呢？继续往下看。
二、添加列表的数据。
列表项中每一项的数据都不一样，所以我们需要准备这些数据。
在一个CSV表格中，我准备了这些数据。
将这些数据复制，然后打开Axure的样式面板，我们也能看到一个表格。
此时，表格中有三行数据，这就是为什么列表项被重复了三次。
不管这三行数据，我们单击表格的首行首列，通过快捷键[Ctrl+V]进行粘贴。
这样就将从CSV表格中复制的数据粘贴了进来。
注意，粘贴数据之后，表格末尾会有一个多余的空行，要将它删除。
并且，我们需要更改自动出现的列名，列名的命名要求与变量一样。
此时，在画布中能够看到列表项被重复了更多次，与样式面板中数据的行数一致。
温馨提示：在Axure RP 10中提供了导入CSV数据的功能，可以直接选择CSV文件导入表格数据。
三、绑定数据到模板。
虽然列表项已经被重复多次，但是每个列表项显示的内容还是一样的。
我们需要将不同的数据绑定到模板的元件上，才能出现不同的列表项。
这一步操作，在Axure RP 10版本出现之前，是需要通过设置交互事件来完成。
在中继器的[每项加载时]，会逐行读取数据表的数据，我们将数据表中的每一列数据，通过[设置文本]的动作，添加给对应的元件。
第一个是“商品信息”元件。
设置它的文本为[富文本]。
在编辑文本的界面中，我们通过系统变量“Item”获取列值。
最简单的办法，就是从[插入变量或函数]列表中直接选取。
我们通过公式替换掉原有的商品名称文字。
还要通过系统变量，替换掉原有的描述文字。
此时，在画布中的中继器列表，商品信息已经发生了变化。
第二个是“价格按钮”元件。
我们为[设置文本]的动作[添加目标]，选择[价格按钮]。
将它的文本也设置为[富文本]。
价格按钮上的文本，数字部分的样式并不统一。整数部分和小数部分需要分别设置。
整数部分可以通过函数“Math.floor()”对价格向下取整。
小数部分可以通过函数“slice()”对价格截取末尾两位。
但是，Axure这个slice函数在这里参数为“-2”会出现Bug，所以我们要输入一个正数参数。
这个正数参数就是截取的起始位置，也就是价格的总字符数量减2的位置。
价格的总字符数量可以通过系统变量“length”获取。
第三个是“折扣”元件。
继续为[设置文本]的动作[添加目标]，选择[折扣]元件。
将它的文本设置为普通的[值]，同样通过系统变量获取折扣的数值。
就在这个时候，问题出现了。
没有折扣的商品，显示为“0”折。
而我们看到网站原列表中，当商品没有折扣时，是不显示折扣图标的。
所以，出现了新的情形。
我们[启用情形]，设置当前交互事件的情形名称为“默认绑定”。
温馨提示：如果不了解情形设置，请参考《情形（条件）的设置》。同时奉劝一句，老老实实的按顺序学习本站教程，否则你会漏掉很多知识点。
然后，继续[添加情形]，名称设置为“没有折扣时”。
[添加条件]判断列值等于“0”。
添加符合条件是需要执行的动作，[隐藏][折扣图标]。
注意，此时两个情形存在“if...else”的逻辑关系，“默认绑定”的情形是无条件执行，从而导致“没有折扣时”的情形永远不被执行。
所以，我们在“没有折扣时”的情形名称上点击鼠标右键，选择“切换为[如果]或[否则]”的选项，将当前情形转为[if]。
此时，在画布中我们能够看到，列表中没有折扣的商品没有显示折扣图标。
温馨提示：在Axure RP 10中，默认绑定的交互已经可以通过[绑定元件]设置实现，无需再添加[每项加载时]的交互事件。但是像“折扣按钮”这种有条件执行的动作，还是需要通过添加交互事件来完成。
四、设置列表的样式。
在中继器的样式面板中，我们先设置列表[水平][布局]。
并且，将它[网格排布]，[每行项数量]为“4”项，[行]间距“16”像素，[列]间距“18”像素。
到这里，我们就通过中继器实现了一个商品列表。
使用中继器实现列表的好处是，当列表组成元件发生修改时，只需修改模板，而不用逐一修改每个列表项。
并且，中继器并非只能实现静态的列表，它还能够对列表进行排序、筛选、添加、修改以及删除等操作。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 中继器的应用（1）