【Axure教程】中继器间图片的传递
中继器在Axure中可以作为图片保存的数据库,在实际系统中,我们经常需要将选择数据库的图片添加到其他图片列表中,所以今天就教大家,怎么在Axure中实现中继器之间的图片传递,包含将一个中继器中的图片列表传递到另一个中继器列表,已经传递后怎么在图片列表中删除对应的图片。
【原型效果】
1、点击图片列表的加号可以显示图片选择器,选择里面的图片;
2、选择图片后点击添加按钮,可以将该图片添加到图片列表;
3、鼠标移入图片列表的图片,会显示删除按钮,点击可以删除该图片;
【原型预览含下载地址】
https://axhub.im/ax9/ca3dd539f46dc856/#g=1&p=添加和删除图片
【制作教程】
1.材料准备
1.1主图片列表
主图片列表我们用中继器来制作,在中继器表格里放一张+号的图片、矩形、删除图标,如下图所示:
其中删除按钮和灰色透明矩形的组合默认隐藏、背景矩形需要增加鼠标移入和选中的样式。
中继器设置成网格显示,水平布局,案例中每行展示4张图片增加适当的行距和列距。
中继器表格里需要增加两列,no列暗顺序123456填写,pic列鼠标右键导入默认的图片
1.2副图片选择列表
副图片选择列表组合主要有矩形、文字、中继器图片列表、图标和按钮组成,如下图所示摆放
中继器图片列表和上面中继器一样,在中继器里放置图片元件和背景矩形,背景矩形需要增加鼠标移入和选中的交互样式,其他布局和上面主图片列表的中继器一致
表里需要两列,picture导入默认图片,biaoji列为空,后续用于逻辑交互
如果图片列表太多,超过了背景矩形的话,我们可以把中继器转为动态面板,调出滚动条并调整动态面板的尺寸。
整个组合转为动态面板,后续可以根据需要固定在屏幕某个位置,或者实现拖动摆放的效果。
2.交互制作
2.1设置图片
两个中继器里的图片,我们都要设置到对应的图片元件里,如果是Axure10或以上的版本,我们点击中继器表格里的连接按钮,选择对应的元件即可;如果是Axure9或以下的版本,我们就要写交互来实现了,在中继器每项加载时,我们用设置图片的交互,将picture列的值设置到对应的图片元件里即可。
2.2主图片列表删除图片
鼠标移入图片组合时,我们要先判断,这个是已经导入了图片的内容还是,+号图片,如果pic列没有内容,就是默认的加号图片;如果有已导入的图片,就用显示的交互,显示删除按钮和灰色透明矩形的组合,鼠标单击删除按钮时,用删除行的交互删除当前行即可,鼠标移出图片组合时,用隐藏的交互,隐藏删除按钮和灰色透明矩形的组合即可。
2.3主图片列表添加图片
我们先定义副图片选择列表的规则,如果biaoji列的值等于1,背景矩形就选中变色,这样我们就可以知道哪个图片被选择了;如果biaoji列的值等于2,就要将这张图片传递到主图片列表里。
鼠标单击+号图片时,我们用显示的交互把副图片选择列表的动态面板显示出来
鼠标单击副图片选择列表里的某张图片时,我们要让他选中变色,我们用更新行的交互,将当前行baioji列的值设置为1,这里我们还需要考虑到有没有其他图片选中,所以我们在更新之前,先把所有行的biaoji列的值先清空,这里我们可以用标记所有行,然后将所有行biaoji列的值设置为0,在更新当前行biaoji列的值等于1。
鼠标点击添加按钮时,我们用更新行的交互,将biaoji列里值等于1的行更新为2,这样就可以将图片传递到主图片列表的中继器里。因为我们想新添加的图片出现在第一张,所以我们对no列先进行排序,按123456从小到大升序排列,所以我们在添加行的时候,no列的值填写0,就是最小的,会自动出现在最前面。然后再用更新行的交互,将主图片列表里no列的值在他原来的基础上+1,相当于0的会变成1、1变成2……这样后续添加的图片都会出现在最前的位置。
2.4副图片关闭时的交互
这里考虑到选中的图片的背景会变色,所以在关闭的时候,要将他还原成透明,我们先标记所有行数据,然后用更新行的交互,将所有行biaoji列的值更新为0,最后用隐藏的交互,隐藏动态面板即可。
这样我们就完成了中继器间图片的传递的原型模板了,后续使用也是很方便,默认的图片内容只需要在中继器里导入,即可自动生成的交互效果。
以上就是本期教程的全部内容,感谢您的阅读,我们下期见。