最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

中继器的应用(1)

教程 小楼一夜听春语 2794浏览

中继器,英文名称“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)