axure商城

Axure中继器元件快速上手教程

作为Axure的高级组件---中继器 小编肯定也是要来分享一下的~
先看一下效果:

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
废话不多说,直接上才艺 >~>
一、首先我们打开中继器看到的是这样的一个一列表格

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
双击之后又变成一个矩形框

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
小编表示自己刚接触的时候也是一头雾水,所以在这里就言简意赅的说明一下,中继器其实就是一个可以展现某个需要重复部件的元件,有重复器的含义,这么说可能还是不理解,所以直接来演示一遍大家就明白了
二、复制一个矩形出来,关闭中继器后发现列表从一行两列变成了三行两列,不难猜测,中继器可以在下方重复显示行

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
 

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
那为什么刚好是显示三行呢,可以看到右边样式表格中的数字123刚好对应矩形中的123,试想一下,添加行456呢,或者改成ABC呢

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
三、于是验证了我们的猜想

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
四、同样在第二列添加数据,发现矩形框中并没有变化,这是因为没有把数据和样式关联起来

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
五、在交互中可以看到原本已经关联了第一列(Column0),所以我们只需要把第二列也关联进去就好了,列名可以随便取,不过要以字母开头,这里小编就以Column1为例啦,那[[Item.]]是啥意思呢,大家可以把它理解为一个函数,直接套用就好啦!

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
六、然后再稍微改一下数据,添加一个表头,这样是不是看起来更加清晰了

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
七、相信到这里大家已经明白了重复器的意义,接下来再介绍关于列表数据的增删吧,首先先搭建出一个简单的输入框(注意在样式这里要改一下命名,方便后面查找)

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
八、点击提交按钮,在交互中事件选择【鼠标单击时】-动作添加【添加行】-中继器-添加行,点击Column0中的fx

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
同样再点击Column1中的fx,添加电话框即可
到这里列表的增加行就完成啦,下面来说删行
九、点击删除按钮,在交互中事件选择【鼠标单击时】-动作添加【删除行】-中继器-已标记,点击确定

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
十、双击中继器,进入两个矩形页面,选中两个矩形Ctrl G组合,然后在交互中时间选择【鼠标单击时】-添加动作【标记行】-中继器

Axure中继器元件快速上手教程

添加图片注释,不超过 140 字(可选)
十一、这里就已经完成删除的操作了,大家还可以加入小编前几期介绍过的选中样式,这样就更完善啦!快冲冲冲!!!

给TA打赏
共{{data.count}}人
人已打赏
基础教程

Axure实例教程:换一批(随机)

2022-8-30 10:23:20

基础教程

五个小技巧玩转Axure RP动态面板

2022-12-26 15:43:58

axure商城
5 条回复 A文章作者 M管理员
  1. 难如上青天

    增加成功,但删除出错,点按钮没有反应,按钮需要特定按钮吗,还是什么别的原因

  2. 难如上青天

    为什么我可以添加,但是删除没反应,请问这是什么原因啊

  3. 秋玲🐯

    有教学视频吗?

  4. LazyJoe

    👍

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索