中继器分页 | Paginating Repeater

在本教程中,你将学习如何给中继器分页,以将它的项目分配到不同的页中。你也可以学习如何使用设置当前显示页面动作以在中继器的页之间进行切换,以及如何使用Repeater.pageIndexRepeater.pageCount函数来显示页码和总页数。【原型预览】

备注:如果你对中继器元件不太熟悉,你可以在这里了解中继器的功能和用法:中继器元件。

1、元件设置
  1. 打开一个新的RP文件,并在画布中打开Page 1
  2. 拖拽一个中继器元件到画布中。
  3. 样式面板中,向中继器的数据集中增加6行数据,并设置Column0的值为4到9。
  4. 元件面板中,切换到Icons元件库,然后使用面板上方的查询功能查找箭头图标。拖拽一个左箭头和一个右箭头到画布中放在中继器元件的两边。
2、给中继器分页
  1. 选中中继器元件,然后在样式面板的底部,选择分页功能下的多页显示选项。
  2. 设置每页项数量为3,保留起始页为1的设置。

这样可以将中继器的9个项目拆分到3个页面中,每个页面包含3个项目,并且在Web浏览器中,中继器将只显示第一页的3个项目。

3、点击箭头时设置当前显示页面
  1. 选中右箭头,点击交互面板中的新建交互
  2. 在弹出的列表中选择单击时事件,然后选择设置当前显示页面动作。
  3. 在目标下拉列表中选择中继器元件。
  4. 页面下拉列表中选择下一项,点击确定按钮保存操作。
  5. 对左箭头重复以上步骤,设置中继器的页面为上一项
4、预览交互
  1. 预览页面,你将看到中继器中显示第一页的三个项目。
  2. 点击右箭头,可以看到第二页的三个项目,再次点击可以看到最后三个项目。
  3. 点击左箭头,可以返回之前的项目。
5、显示当前页面的页码和总页数
  1. 回到Axure RP中,拖拽一个文本标签元件到画布中,将它放在中继器元件下方,并设置它的文本为“第1页/共3页”。
  2. 选中中继器元件,在交互面板中,将鼠标悬停在每项加载时事件下的设置文本动作上,然后点击添加目标
  3. 目标下拉列表中选择文本标签元件。
  4. 点击下方文本框右侧的fx图标以打开编辑文本对话框。
  5. 在对话框顶部的文本框中,选中“1”,点击插入变量或函数,在弹出的列表中选择中继器/数据集下的pageIndex,这时候文本框中的内容会显示为“[[第[[Item.Repeater.pageIndex]]页/共3页]]”。
  6. 选中“3”,再次点击插入变量或函数,在弹出的列表中选择中继器/数据集下的pageCount,这时候文本框中的内容会显示为“第[[Item.Repeater.pageIndex]]页/共[[Item.Repeater.pageCount]]页”。

在Web浏览器中,这两个表达式将分别被中继器当前显示的页面编码和总页数所替代,当中继器翻页时,当前页面的页码也会自动随之改变。

  1. 点击确定按钮关闭编辑文本对话框,再次点击确定按钮保存设置文本动作。
6、预览交互

预览页面,点击右箭头和左箭头来进行翻页,下面的页面将会显示当前显示的页面的页码。

评论(0 个评论)

发表回复

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