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

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

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

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

 

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

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

 

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

 

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

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

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

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

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

单击“上一页”按钮:

单击“下一页”按钮:

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

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值