ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Axure RP 9树与菜单树的实现【教程五】

2021-11-21 18:03:20  阅读:424  来源: 互联网

标签:菜单 RP 元件 A1 Axure 移动 交互 节点


一、树介绍

在Axure RP中,说的就是树形小部件,树型小部件最常用于模拟文件浏览器和可视化其他层次结构。单击树小部件的各个节点可以在页面上显示不同的小部件,或者在项目中打开不同的页面。
在这里插入图片描述
但是自带的树不怎么好用,比如不能修改间距,很多想要的样式都不能实现。鉴于此,我们很有必要自己实现树结构。

□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

二、创建树

①新建一个页面
②创建菜单item
在这里插入图片描述
□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

三、树点击交互

树最明显的特征体现在他的点击交互上,即点击父节点子节点会自动收缩,下面的节点收缩后,其下紧跟着的节点自动跟随。

下面就实现这样的交互


①子菜单转动态面板

这样的目的是为了将所有子菜单组合起来。

动图如下(看不清的话点击放大)

在这里插入图片描述


②点击主菜单隐藏/显示子菜单

这个步骤的目的是实现收缩、展开子菜单

在这里插入图片描述


③子菜单隐藏时后面的主菜单(这里指菜单B)上移
这个步骤的目的是实现收缩、展开子菜单时,后面跟随的菜单上移补位。
比如A收缩子菜单A1时,B菜单移动到A的下面。A1展开时,B就往下推。
原理:A1隐藏时,B移动到A1上方;A1出现时,B移动到A1下方
在这里插入图片描述
说明:

这个步骤相对复杂一点,主要是用到了变量。变量 用 [[变量]]表示。这里用到了元件的方位变量
top:表示上方
bottom:表示下方
left:表示左方
right:表示右方

添加变量时最常用的 是当前元件目标元件,当前元件表示在工作区选择操作的元件,目标元件是在交互动作中选择的的元件


④主菜单移动时子菜单跟着移动
这个步骤的目的是当主菜单移动时,已经展开了的子菜单跟着移动
比如,在上一步骤A收缩时,B会上移紧贴A,但是B1却没有跟着移动,这个步骤就是实现这个功能。
原理:一个元素移动,设置另一个元素跟着移动。
在这里插入图片描述


⑤最后的所有交互
同样的方式,把给B菜单添加交互,使得C跟着移动即可。最后得到
在这里插入图片描述
□ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □

四、最后

两个场景:
1、父节点点击,子节点【隐藏、出现】
2、相邻节点【隐藏、出现】引起当前节点的位置移动。
索引主要的交互就是【隐藏、出现】交互,【移动】交互。

完毕,更多教程请进入系列
…开篇:Axure RP 9操作界面介绍【教程一】
上一篇:Axure RP 9弹窗创建与实现【教程四】

标签:菜单,RP,元件,A1,Axure,移动,交互,节点
来源: https://blog.csdn.net/zhan107876/article/details/121431594

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有