axure如何用中继器做穿梭框?制作方法是什么?
当前位置:贝知网>知识分享>设计开发>axure如何用中继器做穿梭框?制作方法是什么?
axure如何用中继器做穿梭框?制作方法是什么?
时间:2022-04-22 设计开发

axure如何用中继器做穿梭框?制作方法是什么?

axure用中继器做穿梭框制作方法

中继器的英文叫做"Repeater"表示重复的意思,其实中继器有个数据集的概念,所谓的数据集就是这个中继器所要处理的数据源,学习它的使用有助于我们快速设计一些复杂的交互界面。穿梭框是常常会用到的一个选择器,它可以让我们在左右列表框移动数据,实现数据的多项选择。

一、材料准备

1、中继器内含矩形*2;背景框*2;左箭头*1;右箭头*2;文本*2。

2、中继器内需要取消矩形的边框,设置鼠标移入时填充颜色为灰色,选中时填充颜色为蓝色,方便有更好的交互体验感。

3、将背景框调整到合适的大小和位置,放置底层。

4、左边的是未选项中继器1,需要在中继器表格内填写对应选项文字;复制到右面为已选项中继器2,由于已选项默认为0,所以需要删除中继器所有行,默认空值即可。

5、中继器1和2均需取消隔离选项组和隔离单选按钮组效果,两个中继器内的矩形需要设置单选组。

6、文本元件命名为逻辑1和逻辑2,默认为空且隐藏,后续用于逻辑交互。

二、交互设置

中继器1每项载入时:

中继器默认交互 - 设置中继器1内矩形文字为列表Column0的值。

中继器1内矩形鼠标单击时:

因为之前我们设置了选中的颜色变蓝,所以当我们点击之后就可以知道选中了那一项,而且因为设置了单选组,所以也不会同时选中多个。

设置逻辑1的文本为列表Column0的值,以方便后面左右箭头穿梭的操作。

中继器2每项加载时及内部矩形鼠标单击时:

中继器2和1的交互一样,但是需要注意的是中继器2里面设置的文本是逻辑2的文本。

右箭头鼠标单击时:

逻辑1的文字如果为空就是还没选中,不发生交互;如果不为空,需要做一个增加行和删除行的交互。

增加行:在中继器2中增加行,增加的值为逻辑1文本值。

删除行:删除中继器1里的和逻辑1文本值相同的行。

完成上述两个交互之后,我们需要清空逻辑1的文本,不清空的话点击右箭头就可以无限增加同一个选项。

左箭头鼠标单击时:

这个和【右箭头鼠标单击时】的设置交互是反过来的。

增加行:在中继器1里增加行,增加的值为逻辑2文本值。

删除行:删除中继器2里的和逻辑2文本值相同的行。

设置逻辑2的文本值为空值。

axure用中继器做联级框步骤

中继器的英文叫做"Repeater"表示重复的意思,其实中继器有个数据集的概念,所谓的数据集就是这个中继器所要处理的数据源,学习它的使用有助于我们快速设计一些复杂的交互界面。

一、文本框

1、首先我们需要在画面中拖入矩形,模拟输入框,并填入文字“请选择”。

2、接着为文本框设置【悬停】、【选中】、【获取焦点】的交互样式。

3、获得文本框模型。

二、联级框

1、拖入三个中继器,分别命名为【L1】、【L2】、【L3】作为一级、二级、三级的联级列表。

2、接着做好数据填充,设置【每项加载】,分别将【Item.L1】、【Item.L2】、【Item.L3】赋值给到【L1】、【L2】、【L3】。

3、在填充数据的时候,建议先用 Excel 做好数据备份,以便后续修改使用。并且中继器数据是支持直接通过 Excel 复制黏贴到中继器的数据表中的。

三、交互设置

1、用鼠标选中【L1】的中继器,双击选中【L1】文本标签,为它交互动作 -【单击时】设置切换选中效果。

2、为【选中时】状态添加设置文本,将【Item.L1】赋值给到【sel_L1】的文本标签。

3、同时向目标对象【L2】中继器添加筛选设置,规则为[[Item.L1==TargetItem.L1]],在“移除其他筛选”【取消选中时】前面进行勾选。

4、将【sel_L1】设置为空值,且移除【L2】的筛选,同时隐藏【L2】,并且显示【L2】中继器。

5、同样,【L3】需要设置切换选中的交互动作,但【选中时】仅需将【Item.L3】赋值给到【sel_L3】文本标签,且【取消选中时】将【sel_L3】设置为空值。