无锡做智能网站城建亚泰建设集团网站
中继器在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，最后用隐藏的交互，隐藏动态面板即可。
这样我们就完成了中继器间图片的传递的原型模板了，后续使用也是很方便，默认的图片内容只需要在中继器里导入，即可自动生成的交互效果。
以上就是本期教程的全部内容，感谢您的阅读，我们下期见。