Axure的中继器除了进行列表的增删改外，还可以利用它来实现一些比较复杂的组件，例如穿梭框，这该怎么制作穿梭框呢？下面我们就来看看详细的教程。
1、首先我们需要两个中继器作为左中继器和右中继器，分别加入三个选项
左中继器：选项一、选项二、选项三，
右中继器：选项四、选项五、选项六，
并将中继器的值赋予左中继器_选项，右中继器同理，关于选项的样式各位网友根据自己的心意来哈。
2、接着我们要利用交互实现当鼠标悬停时对应矩形框变色，选中时的效果方框为蓝色并打钩。这里打钩选项我用的是图片，即在选中数据时显示该图片，网友可以去找SVG的图标。
3、然后我们设计移入移出的两个按钮，设置鼠标悬停效果
4、接着我们要实现两个中继器的右移左移，这里可以理解为当点击右移按钮时，数据在左中继器删除了这一行，在右中继器中增加了这一行。先做删除行的效果，以加入右侧按钮为例，点击时我们需要删除左中继器的选中行，因此我们需要在左中继器的单击事件中加入判断，如果选中了则标记行，取消选中则取消标记行，如下图。
5、以加入右侧按钮为例，我们要实现点击时删除数据并移动该条选中数据至右中继器，删除数据的效果前面我们已经做了，接下来是在点击加入右侧按钮在右中继器新增行。这个时候我们需要用到全局变量，将需要右移的数据存储进去，然后使右中继器获取数据
1）在左中继器标记行时同时将数据存储进全局变量
2）在点击加入右侧按钮时添加在右中继器添加行，行数据为该全局变量的交互
6、以上步骤做完后穿梭框的功能就基本完成。接下来网友们再根据自己的需要为穿梭框进行美化就OK啦~
以上就是Axure中继器制作穿梭框效果的教程，希望大家喜欢，请继续关注脚本之家。
相关推荐：
