0
点赞
收藏
分享

微信扫一扫

关于axure中,用中继器制作穿梭框

狗啃月亮_Rachel 2022-02-18 阅读 79
axure交互

写在前面:突然发现我下面的教程左侧和右侧的未选列表已选列表反了,不过只是文字反了,功能呢逻辑不反!
最近研究了一下用中继器制作穿梭框,一种带搜索功能,一种不带搜索功能。这次说一下不带搜索功能的穿梭框,不过最后也会将搜索功能说明,不过就不会这么详细啦~
在这里插入图片描述

一、准备工作

如第一张图所示,我们需要准备的有两个表格,两个中继器(要给中继器取名字,我给左侧中继器取名为1,给右侧中继器取名为2),还有两个向左向右的图标。
在这里插入图片描述
然后将中继器长和宽根据表格的大小调整好
在这里插入图片描述

二、正式开始

  1. 双击左侧中继器,复制一个矩形框,进行命名,我命名为mingcheng,原有的矩形框命名为id,隐藏命名为id的矩形框,将mingcheng的位置覆盖在id之上。
  2. 选中中继器,添加一列,并命名,我就按照系统默认命名啦;然后点击交互,让mingcheng的矩形可以在显示。右侧中继器也这么操作。(注意,右侧中继器要把行的数据全部删除,不然左边的数据穿梭到右边的时候就会从中间开始显示,因为右侧中继器原来已经有数据,所以新增的数据排列在原有数据下方)在这里插入图片描述在这里插入图片描述
  3. 现在id对应第一列,mingchneg对应第二列,我们在中继器中填写数据
    在这里插入图片描述
  4. 现在我们开始梳理逻辑,我的想法是,例如:点击张三,张三会从左侧的框消失,并且在右侧的框内展示。所以我们需要双击点进中继器,选择矩形框mingcheng,触发事件选择单击时,删除本行,并在右侧中继器新增本行。
    在这里插入图片描述
    点击添加行
    在这里插入图片描述
    在这里插入图片描述
    因为插入右侧中继器的是左侧中继器的数据,所以变量取的是左侧中继器中矩形mingcheng的值
    在这里插入图片描述
    再给左侧的中继器添加排序,如果不添加排序,插入到右侧中继器的数据就乱了。
    在这里插入图片描述
    现在整个左侧中继器数据穿梭到右侧中继器就完成了,右侧的穿梭到左侧的逻辑是一样的,只不过和左侧的相反。
    现在是差两个左箭头/右箭头图标,左箭头/右箭头图标是点击图标,左侧或右侧数据全部穿梭到另一侧。
    逻辑就是删除左侧和右侧所有数据,并让左侧数据新增在右侧。
    现在点击右箭头图标。
    在这里插入图片描述
    添加6行我直接写的左侧的所有数据。
    在这里插入图片描述
    左箭头同理哦~
    那么一个穿梭框就完成了。
举报

相关推荐

0 条评论