Axure教程—中继器分页

本文是关于Axure中继器的运用操作,详细讲解利用Axure中继器实分页的操作流程,比较基础,供初学者参考学习。
效果
在这里插入图片描述
预览地址:https://hd42dm.axshare.com

功能
1、点击“数字”显示相应页面的内容
2、点击“首页”显示第一页内容
3、点击“尾页”显示最后一页内容
4、点击“上一页”显示当前页面上一页内容
5、点击“下一页”显示当前页面下一页内容

制作
一、 需要的元件:

  • 中继器
  • 矩形
    二、制作过程
    1、表头
    拖入五个矩形元件(与中继器列数一致),分别命名为学号、姓名、年龄、性别、班级,五个矩形组合一起,命名为表格title,如图:
    在这里插入图片描述
    2、中继器
    在矩形下方拖入一个中继器元件,命名为list,并对中继器赋值,如图:
    在这里插入图片描述
    3、中继器内部
    拖入五个矩形元件(与中继器列数一致),分别命名为学号、姓名、年龄、性别、班级,五个矩形组合一起,命名为data,如图:在这里插入图片描述
    4、页码按钮
    拖入12个矩形元件,分别命名为ijndex、previous、p1、p2、p3、p4、p5、p6、p7、p8、next、last,组合一起命名为分页,如图:

在这里插入图片描述
元件制作完毕

交互设置
1、中继器
中继器每项加载时,分别对中继器内部矩形学号设置文本[[Item.col1]]、姓名[[Item.col2]]、年龄[[Item.col3]]、性别[[Item.col4]]、班级[[Item.col5]],如图:

在这里插入图片描述
2、页码按钮

  • 首页
    鼠标点击时,设置中继器页面为1,设置P1的状态为“ture”,如图
    在这里插入图片描述
    在这里插入图片描述

  • 上一页
    鼠标点击时设置,如图:
    在这里插入图片描述

  • P1
    鼠标点击时,设置当前元件为选中状态为”true“,并对p1、p2、p3、p4、p5、p6、p7、p8进行文字设置,设置中继器当前页面为[[LVAR1]],如图:
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/fbb1b3312a354fdaaff0c7b87cefe187.png

  • P2
    鼠标点击时,设置当前元件为选中状态为”true“,并对p1、p2、p3、p4、p5、p6、p7、p8进行文字设置,设置中继器当前页面为[[LVAR1]],如图:
    在这里插入图片描述

  • P3
    鼠标点击时,设置当前元件为选中状态为”true“,并对p1、p2、p3、p4、p5、p6、p7、p8进行文字设置,设置中继器当前页面为[[LVAR1]],如图:
    在这里插入图片描述

  • P4
    鼠标点击时,设置当前元件为选中状态为”true“,并对p1、p2、p3、p4、p5、p6、p7、p8进行文字设置,设置中继器当前页面为[[LVAR1]],如图:
    在这里插入图片描述

  • P5
    鼠标点击时,设置当前元件为选中状态为”true“,对p1设置文本1、p2设置为本…、p3设置文本[[LVAR1.pageCount-5]]、p4设置文本[[LVAR1.pageCount-4]]、p5设置文本[[LVAR1.pageCount-3]]、p6设置文本[[LVAR1.pageCount-2]]、p7设置文本[[LVAR1.pageCount-1]]、p8设置文本[[LVAR1.pageCount]],设置中继器当前页面为[[LVAR1]],如图:
    在这里插入图片描述

  • P6
    鼠标点击时,设置当前元件为选中状态为”true“,对p1设置文本1、p2设置为本…、p3设置文本[[LVAR1.pageCount-5]]、p4设置文本[[LVAR1.pageCount-4]]、p5设置文本[[LVAR1.pageCount-3]]、p6设置文本[[LVAR1.pageCount-2]]、p7设置文本[[LVAR1.pageCount-1]]、p8设置文本[[LVAR1.pageCount]],设置中继器当前页面为[[LVAR1]],如图:
    在这里插入图片描述

  • P7
    鼠标点击时,设置当前元件为选中状态为”true“,对p1设置文本1、p2设置为本…、p3设置文本[[LVAR1.pageCount-5]]、p4设置文本[[LVAR1.pageCount-4]]、p5设置文本[[LVAR1.pageCount-3]]、p6设置文本[[LVAR1.pageCount-2]]、p7设置文本[[LVAR1.pageCount-1]]、p8设置文本[[LVAR1.pageCount]],设置中继器当前页面为[[LVAR1]],如图:在这里插入图片描述

  • P8
    鼠标点击时,设置当前元件为选中状态为”true“,对p1设置文本1、p2设置为本…、p3设置文本[[LVAR1.pageCount-5]]、p4设置文本[[LVAR1.pageCount-4]]、p5设置文本[[LVAR1.pageCount-3]]、p6设置文本[[LVAR1.pageCount-2]]、p7设置文本[[LVAR1.pageCount-1]]、p8设置文本[[LVAR1.pageCount]],设置中继器当前页面为[[LVAR1]],
    载入时设置 当前元件文本[[LVAR1.pageCount]]
    如图:
    在这里插入图片描述

  • 下一页
    鼠标点击时设置,如图:
    在这里插入图片描述

  • 尾页
    鼠标点击时设置,如图:
    在这里插入图片描述

  • 整体页面
    页面加载时设置,如图”
    在这里插入图片描述
    制作完毕。

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Andy&lin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值