Axure中继器基本使用手册

 时间:2024-11-05 11:30:27

中继器最为Axure最复杂最难的一个功能,其实理解起来没有那么难,中继器基本的功能是实现酚祯馄嫱行或列的动态增加或者删除,本文希望通过简洁易懂的语言带你理解和学会使用这个工具。

工具/原料

Axure

Windows/Mac

IE/Chrome/Safari

方法/步骤

1、拖动中继器元件水貔藻疽,新建一个。如图,是一个一列三行的表格,注意一下右侧“交互”和“中继器”两块用绿框圈起来的部分,[[item缕计瓤账.Column0]]中的Column0与“中继器”的第一列列名一样。但是,文字于(矩形)中的‘矩形’不知道对应的是哪一个,别着急,往下看。

Axure中继器基本使用手册

2、鼠标双击步骤1的表格,进入下图,可以看到有一个矩形框,我们把矩形框的名字改成‘测试矩形’。然后再返回步骤1的界面。

Axure中继器基本使用手册

3、可以看到,交互里面的名字已经变过来了,变成了‘测试矩形’。现在我们就知道他们之间到底是怎么关联的了。

Axure中继器基本使用手册

4、我们接着走下一步,在步骤2中再添加一个矩形,更改名称为‘矩形1’,如图:

Axure中继器基本使用手册

5、返回中继器页面,可以看到多了一列。

Axure中继器基本使用手册

6、在步骤5中,我们在右侧绿框选中的中继器数据表中看到,新增了一列“Column1”,敛财醣沁并且在下面新增了一行数据‘23’,但是中继器没有变化,第二列仍然是空白列。这个时候我们需要在埽跆翁崾交互中点击Case1,再次配置“每项加载时”的交互动作,如下图:按照绿框标注,将已命名为“矩形1”的矩形框设置文本为[[item.Column1]],Column1对应中继器数据表中新增的列“Column1”,点击确定。

Axure中继器基本使用手册

7、如图,配置Column1的行数据,就可以看到中继器第二列的数据都显示了出来。

Axure中继器基本使用手册

8、下面我们开始进阶,如图,新建两个文本输入框和添加、删除按钮。对每个文本框都进行命名‘name’、‘age’。

Axure中继器基本使用手册

Axure中继器基本使用手册

9、选中“添加”按钮,配置交互-鼠标单击时:

Axure中继器基本使用手册

10、中继器-数据集-添加行,按图示顺序操作,下一步需要配置“TestColumn1”和“Column1”的数据。

Axure中继器基本使用手册

11、点击fx,在弹出页声矜檠鹣面中点击“添加局部变量”,设置元件文字=name,name是中继器页面“姓名文本输入框”的名称。在点击插入变量或函数,选择LVAR1变量名,如图:

Axure中继器基本使用手册

12、同样,对步骤10中的第二个fx也进行类似的操作,只不过元件文字=age.

Axure中继器基本使用手册

13、以上两步都完成后,点击确定。

Axure中继器基本使用手册

14、返回中继器页面,点击预览。

Axure中继器基本使用手册

15、在名称和年龄文本框中输入一些文字或数字,点击添加按钮,就会有一行新的数据显示在下方。同理,删除也是一样的操作,只不过交互动作就变成了中继器-删除行。

Axure中继器基本使用手册

C4D在哪个位置能修改环境覆盖 墨刀工作流功能使用技巧 苹果Mac系统如何卸载删除Adobe Animate CC 2017 maya的属性编辑器运用 在unity3D中设计地面
热门搜索
借种电影 卡通大象图片 日本邪恶图片 影音先锋电影 图片剪裁