教程中继器实现穿梭框功能

　　在用Axure的时候，怎么通过中继器实现穿梭框功能呢？本文分享了一个方法。
　　AXURE中的中继器是非常强大的底层组件。我们利用好中继器的强大功能，可以为我们原型设计带来很多便利，今天我们要介绍的是如何利用中继器来组装一个穿梭框。
　　我们先来看下效果：
　　选中几项：
　　点击移到右侧已选区：
　　在已选区再剔除：
　　下面我们详细介绍一下，如果通过中继器来实现这个穿梭框。
　　1。先在页面上拖入一个动态面板，取名字为候选区动态面板
　　2。在动态面板中放入一个中继器。
　　我们在中继器中分别放入2个文本框元件，分别取名字为选中标志和选项名称。
　　选中标志我们采用FontAwesome5Free字体，来显示选中状态和未选中状态，两款字体如下：
　　选中未选中
　　对应的中继器列设置如下：
　　分别有：name、checked、view
　　name：用来显示项目的名称
　　checked：用来显示选中还是未选中（由于是FontAwesome5Free字体，在中继器中无法正常显示），在此处默认为未选中状态的字体。
　　view：用来控制是否显示在页面上。默认都是1。
　　3。设置默认的加载交互
　　即把中继器中的数据字段与页面上的对应。
　　4。把上述动态面板复制一份，改名称为已选动态面板、已选中继器
　　5。设置候选项的点击交互。
　　（1）如果点击的行为未选中状态的：
　　先将点击行中的选中状态字段的文字设置为已选中的文字，这样子我们页面上就看到了选中状态的图形文字。
　　对已选中继器执行添加1行的操作。
　　对已选中继器执行标记全部行的操作。
　　（2）如果是已选中状态的：
　　将已选中的文字修改为未选中。
　　将已选中继器中将当前取消的数据删除。
　　这里要主要，我们当前是在后续中继器中，我们要控制操作的是已选中继器，
　　所以在规则设置中，要选〔〔TargetItem。nameItem。name〕〕，TargetItem就是代指已选中继器。
　　6。接下来我们来对选中移动按钮进行交互设计
　　（1）先将已选中继器中已标识的数据行中的VIEW字段设置为1，即是可以显示的状态。
　　（2）为了防止已选中继器数据过多时，只显示第一页，所以对已选中继器显示的页码进行了设置。
　　（3）对候选中继器中checked字段为已选中状态的行删除。
　　这样，点击移动按钮后，候选区中勾选的项会移动到已选区。
　　7。对已选区中继器进行剔除操作
　　（1）未选中状态：
　　（2）选中状态：
　　8。剔除按钮
　　第一步先点击剔除按钮时，对候选中继器VIEW字段1的进行标记。
　　第二步对候选中继器进行筛选，只对view1的数据显示，并排除其他筛选。
　　第三步对已选中继器中选中状态的行进行删除。
　　这样子，就完成了我们上面用原生AXURE的中继器来实现穿梭框组件，实现多项选择和剔除等交互操作。
　　原型地址：https：0571pm1255625528。cos。apshanghai。myqcloud。comhtmlE7A9BFE6A2ADE6A186index。html