使用axure rp 8.0中的中继器实现简单的翻页功能

时间:2024-03-13 07:44:53

1.在图形库中找到中继器,选中拖到工作区域,中继器初始的格式如下:

使用axure rp 8.0中的中继器实现简单的翻页功能

 2.为了方便后续的操作,这里我们首先需要修改一下中继器的格式,双击进入中继器编辑页面,选中矩形,按住ctrl+鼠标左键向右移,操作两次,操作之后的界面如下:

使用axure rp 8.0中的中继器实现简单的翻页功能

 3.在右边中继器的表格中添加数据,在“添加列”中命名数据字段,count,name,age,再填写各类字段的数据,如下图所示:

 使用axure rp 8.0中的中继器实现简单的翻页功能

 4.添加交互行为,选中中继器,在交互中,选中“每项加载时”对表格中的不同数据字段进行匹配设置,如下所示:

使用axure rp 8.0中的中继器实现简单的翻页功能

按照以上方法,分别设置好了对应的数据字段,设置效果如下:

 使用axure rp 8.0中的中继器实现简单的翻页功能

5. 在“样式"中对中继器中的内容进行分页显示,在该中继器中,总共有6条数据,我们分成两页显示,每页显示3条数据内容,操作如下所示:

 使用axure rp 8.0中的中继器实现简单的翻页功能

6. 添加两个切换上下页的按钮,命名为上一页,下一页,具体操作如下:

使用axure rp 8.0中的中继器实现简单的翻页功能

7.为按钮添加点击事件,在交互中选择“鼠标单击时”-添加用例,这时会弹出用例编辑框,找到中继器中的“设置当前显示页面”,将页码设置为“1”,操作如下所示:

使用axure rp 8.0中的中继器实现简单的翻页功能

 如果想要每页显示不同的项目数量,在该中继器页面也同样可以设置,如下所示(由于前面在样式中我们已经设置了每一页显示3条数据,所以这一步其实是可以省略的)

使用axure rp 8.0中的中继器实现简单的翻页功能

 “下一页”按钮添加交互事件的操作与“上一页”类似,这里不予赘述,操作如下:

使用axure rp 8.0中的中继器实现简单的翻页功能

8.ctrl+s保存所有的设置,预览翻页效果,按F5快捷键,可以看到我们已经实现了简单的翻页功能,预览效果如下:

单击“上一页”按钮:

使用axure rp 8.0中的中继器实现简单的翻页功能

单击“下一页”按钮:

使用axure rp 8.0中的中继器实现简单的翻页功能

作为菜鸟研究这个翻页花了不少时间,学会之后发现自己真傻,这么简单的功能居然研究了这么久,不过这也是慢慢熟悉操作的过程,对于比较熟练axure的老手来说,本文可能有点啰嗦,希望各位见谅哈。