当前位置: 首页 > news >正文

【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,最后用隐藏的交互,隐藏动态面板即可。

图片

这样我们就完成了中继器间图片的传递的原型模板了,后续使用也是很方便,默认的图片内容只需要在中继器里导入,即可自动生成的交互效果。

以上就是本期教程的全部内容,感谢您的阅读,我们下期见。

http://www.dtcms.com/a/272697.html

相关文章:

  • Meta新注意力机制给 Transformer 升了级!底层架构的革命!
  • JAVA JVM对象的创建
  • 水陆联防智能升级:AI入侵检测系统守护零死角安全
  • 介绍 cnpm exec electron-packager
  • x86汇编语言入门基础(三)汇编指令篇3 位移运算
  • 【threejs】第一人称视角之八叉树碰撞检测
  • 蜻蜓I即时通讯系统重构宣言:破茧重生的技术革命-长痛不如短痛卓伊凡|麻子|果果
  • 大健康IP如何借“合规创新”抢占行业新风口|创客匠人
  • 解读 Go 中的 constraints包
  • 【TCP/IP】7. IP 路由
  • xml 知识总结: xsd,xsi:schemaLocation,xmlns,xmlns:xsi
  • SpringBoot系列—MyBatis(xml使用)
  • codeforeces Round1032 - Round 1036
  • 【node后端】搭建项目(Express+Ts+Typeorm+Mysql一步到位)
  • 深入浅出 Python Asynchronous I/O:从 asyncio 入门到实战
  • Arc Institute提出首个AIVC虚拟细胞模型STATE
  • 上海交大医学院张维拓老师赴同济医院做R语言训练营培训
  • 从Debug中学习MiniGPT4
  • 在Vue中如何对组件进行销毁在进行挂载
  • 模型训练之数据标注-Labelme的使用教程
  • 5款工具高效制作插图,PPT设计新选择!
  • 货车车架和悬架设计cad【7张】+设计说明书
  • leetcode 3440. 重新安排会议得到最多空余时间 II 中等
  • 《PyQt6-3D:开启Python 3D编程新世界 2》
  • 【TCP/IP】8. 传输层协议
  • hive小文件问题
  • 二层环路避免-STP技术
  • Linux【大数据运维】下制作Redis绿色免安装包(一)
  • 企业网络安全的“金字塔”策略:构建全方位防护体系的核心思路
  • upload-labs靶场通关详解:第20关 /.绕过