【中继器高级应用】产品列表 | Product Listing

创建一个基于网格的产品列表。使用中继器元件的样式选项来创建网格布局,将图片元件导入中继器的数据集,并将它们显示在中继器项目的图片元件上,一次使用多个数据集的列值,设置文本到中继器的元件上。

如果你不熟悉中继器元件,你可以在我们的中继器元件参考指南中了解它的功能和使用方法,你也可以从我们的中继器基础教程开始。

STEP 0:下载中继器练习文件

如果你还没有练习文件,请下载Axure中继器练习文件.rp并在Axure RP中打开它,该文件包含了Axure中继器教程中对应的每个页面。

STEP 1:创建网格布局

在中继器练习文件中打开“中继器高级应用-产品列表”页面,画布上有一个名为“书籍”的中继器元件,其中包含了九个数据行和三个元件,一个“背景”矩形元件,一个“信息”矩形元件,和一个“封面”图片元件。

选中“书籍”中继器,在检视窗格中打开样式页签,在“布局”部分中,选中标有“水平”的单选按钮以更改中继器的排列方向,然后勾选“网格排布”的复选框,并且设置“每排项目数”为“3”,现在中继器应该显示为一个3乘3的网格。

现在让我们在中继器的项目之间添加一些间距,向下滚动到样式页签最下面的“间距”部分,将“行”和“列”的值设置为“15”。

STEP 2:设置图片

在“书籍”中继器被选中的状态下,切换到检视窗格中的属性页签,在数据集中,注意有三列:“Title”列包含了书籍的标题,“Author”列包含了书籍的作者姓名,“Cover”列包含了书籍的封面图片文件。

备注:你可以通过在单元格上点击右键,并在右键菜单中选择“导入图片”,来将图片文件导入到数据集的单元格中。

在属性页签的顶部,双击“每项加载时”来添加一个新的每项加载时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“设置图片”动作,在右侧“配置动作”栏中选择“封面”图片元件

在右侧“配置动作”栏的下方,注意有五种可以导入图片的类型。第一个,“Default”,是图片元件的默认图片,其他四个引用的图片元件的<交互样式>。我们不会为“封面”图片元件设置任何交互样式,所以我们只设置“Default”图片。

在“Default”下方的下拉列表中,选择“值”,这时候会出现一个文本框,点击文本框右边的“fx”按钮以打开编辑值对话框。

在对话框的顶部,点击“插入变量或函数…”,在弹出的菜单中点击“中继器/数据集”下面的“Item.Cover”,注意,这时候对话框顶部的文本框中会显示“[[Item.Cover]]”。

点击“确定”按钮关闭编辑值对话框,再次点击“确定”按钮关闭用例编辑器,现在每个中继器项目中的图片元件都会显示一个书籍封面。

STEP 3:使用多个数据集列值设置文本

在“书籍”中继器元件被选中的状态下,在检视窗格中的属性页签下,双击“每项加载时”下面的“Case 1”来进一步编辑用例。

在用例编辑器中,点击左侧“添加动作”栏中的“设置文本”动作,在右侧“配置动作”栏中选择“信息”矩形元件。

在右侧“配置动作”栏的底部,将“设置文本为”下方的下拉列表选项“值”改为“富文本”,然后点击出现的“编辑文本”按钮。

在弹出的输入文本对话框中,删除顶部文本区域中的现有文本,然后在文本格式选项下点击“插入变量或函数…”,在弹出的菜单中,点击“中继器/数据集”下面的“Item.Title”,这时候“[[Item.Title]]”将出现在顶部的文本区域中,并且被格式化为18号的粗体样式。

按下回车键进行换行,输入“by ”(包括后面的空格),然后再次点击“插入变量或函数…”,在弹出的菜单中点击“中继器/数据集”下面的“Item.Author”,这时候“[[Item.Author]]”将出现在顶部文本区域中“by”的后面,显示为“by [[Item.Author]]”。

选中文本区域中的第二行并删除粗体格式,然后将字号设置为16。

点击“确定”按钮关闭输入文本对话框,然后再次点击“确定”按钮关闭用例编辑器。现在,每个中继器项目中的“信息”矩形将会以较大的粗体显示署名,并且在书名下方以较小的字体显示作者姓名。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注