中继器分页 | Pagination

给中继器元件非也可以使项目分隔到多个页面,通过设置当前显示页面动作在中继器中切换页面,使用[[Repeater.pageIndex]]和[[Repeater.pageCount]]值来显示页码和总页数。

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

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

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

STEP 1:给中继器分页

在中继器练习文件中打开“分页”页面,在画布上有一个3×3的中继器,显示了一些书籍;还有一组元件将用于设置中继器当前显示页面,显示当前页码,以及显示总页数。

选中“书籍”中继器元件并打开检视窗格中的样式页签,向下滚动到“分页”区域,勾选“多页显示”的复选框,将“每页项目数”的值设置为“3”,保持“起始页”的值为“1”不变。这样将把中继器的九个项目分到三个页面中,每个页面有三个项目,并且中继器在Web浏览器中加载的时候只会显示第一个页面的项目。

STEP 2:通过箭头图标设置当前显示页面

在画布上点击两次“下一页”形状元件(右箭头图标)以将它选中,第一次点击是选中“分页控件”组合,第二次点击才是选中形状本身(或者,你也可以在概要窗格中直接选中形状元件)。然后在检视窗格中的属性页签下,双击“鼠标单击时”来添加一个新的鼠标单击时用例。

在用例编辑器中,点击左侧“添加动作”栏中的“设置当前显示页面”动作(位于“中继器”下面),然后在右侧“配置动作”栏中选择“书籍”中继器元件。

在右侧“配置动作”栏的底部,设置下拉列表的选项为“Next”,这样将会使中继器当前显示的页面为下一个页面。

点击“确定”按钮关闭用例编辑器。

对“上一页”形状元件(左箭头图标)重复以上步骤,设置下拉列表的选项为“Previous”。

STEP 3:预览

在Web浏览器中预览页面,点击右箭头图标来查看中继器的另外两个页面,然后再点击左箭头图标回到第一页。

STEP 4:显示当前页码和总页数

回到Axure RP中,选中“书籍”中继器元件,在检视窗格中的属性页签下,双击“每项加载时”下面的“Case1”用例以进行编辑。

在用例编辑器中,点击左侧“添加动作”栏中的“设置文本”动作,在右侧“配置动作”栏中选择“分组控件”组合下的“页码”矩形元件,然后在这一栏的底部,点击文本框右侧的“fx”按钮以打开编辑值对话框。

请注意,对话框顶部的文本框中已经预先填充了矩形的现有文本:“Page #/#”,这就是我们想要显示的页码信息的格式——当前页码/总页数,所以我们只需要用适当的值替换“#”符合即可。

选中第一个“#”符号并点击“插入变量或函数…”,在弹出的菜单中,点击“中继器/数据集”区域底部的“pageIndex”,注意这时候“#”被替换成了“[[Item.Repeater.pageIndex]]”,这个值表示当前显示的中继器页面的编号。

现在,选中另外一个“#”符号并点击“插入变量或函数…”,在弹出的菜单中,点击“中继器/数据集”区域底部的“pageCount”,注意这时候“#”被替换成了“[[Item.Repeater.pageCount]]”,这个值表示中继器中的总页数。

总之,编辑文本对话框顶部的文本框中文本应显示为“Page [[Item.Repeater.pageIndex]]/[[Item.Repeater.pageCount]]”。

点击“确定”按钮关闭编辑文本对话框,然后再次点击“确定”按钮关闭用例编辑器。

STEP 5:预览

在Web浏览器中预览页面,箭头图标中间的文本将会显示为“Page 1/3”,点击箭头图标在中继器的三个页面之间来回切换,当前页码就会随之更新。

STEP 6:在第一页隐藏“上一页”箭头,在最后一页隐藏“下一页”箭头

由于中继器页面无法从UI后一页切换到第一页,因此在无法使用的页面上,我们将箭头图标隐藏。在第一页的时候你不能再向前翻页,因此我们要在第一个中继器页面隐藏“上一页”元件;同样的,在最后一页的时候你不能再向后翻页,所以我们要在最后一个中继器页面隐藏“下一页”元件。

回到Axure RP中,选中“书籍”中继器元件,在检视窗格中的属性页签下,双击“每项加载时”来添加第二个每项加载时用例。

在用例编辑器的顶部,点击“添加条件”按钮一打开条件设立窗口。

在条件设立窗口中,将第一个下拉列表的选项更改为“值”,这样将使第二个下拉列表变成文本框,点击文本框右侧的“fx”按钮以打开编辑文本对话框。

在对话框的顶部,点击“插入变量或函数…”,在弹出的菜单中,点击“中继器/数据集”下的“pageIndex”,注意这时候编辑文本对话框顶部的文本框中将显示“[[Item.Repeater.pageIndex]]”,然后点击“确定”按钮关闭对话框。

回到条件设立窗口,在最右侧的文本框中输入“1”(不含引号),以使条件描述显示为“if “[[Item.Repeater.pageIndex]]” == “1””,当中继器的第一页显示时,这个条件将被判为“真”。

点击“确定”按钮关闭条件设立窗口。

回到用例编辑器,点击左侧“添加动作”栏中的“隐藏”动作(位于“显示/隐藏”下面),在右侧“配置动作”栏中选择“上一页”形状元件。

点击缺“确定”按钮关闭用例编辑器。注意属性页签中,这个新建用例的条件以“Else If”开头,我们想让这个条件独立于第一个用例而单独判断,因此右键点击它,然后在右键菜单中选择“切换为<If>或<Else If>”,现在这个用例的条件将会以“If”开头。

对“书籍”中继器重复以上步骤来创建第三个每项加载时用例,使用条件“if “[[Item.Repeater.pageIndex]]” == “[[Item.Repeater.pageCount]]””,当中继器显示最后一页时,它将被判为“真”,也就是页码等于页数(3/3)的时候。在这个用例中,隐藏“下一页”形状元件。

STEP 7:在其他页面显示两个箭头

我们希望在除第一页和最后一页之外的所有页面上显示两个箭头图标,因此让我在中继器的第一个每项加载时用例上添加一个显示动作。与我们在最后一个用例中设置的情况不同,这个用例没有条件,从而适用于典型/默认情况。

在“书籍”中继器元件被选中的状态下,在检视窗格中的属性页签下,双击“每项加载时”下的“Case1”以打开进行编辑。

在用例编辑器中,点击左侧“添加动作”栏中的“显示”动作(位于“显示/隐藏”下面),在右侧“配置动作”栏中选择“分页控件”中的两个箭头元件,然后点击“确定”按钮关闭用例编辑器。

STEP 8:预览

在Web浏览器中预览页面,注意左箭头图标没有显示,点击右箭头图标来查看中继器的第二个页面,并且注意这时候左箭头图标显示了出来。然后再次点击右箭头图标来查看中继器的最后一个页面,注意右箭头图标被隐藏。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。