Axure中选项卡切换的实现 获赏10金币 基础教程

lsyjohn 普通用户 2020-2-22 1261

效果如下所示:

原理也很简单,就是通过标签切换动态面板的状态。其中主要有三个知识点,即动态面板的基本使用、选项组以及指示线的移动。动态面板的基本使用可以查看https://www.pmyes.com/thread-35463.htm

选项组

选项组就是将只能一个选项处于选中状态的组合,通过设置选项组,我们只需要触发元件动作上进行设置选中的操作,即可使目标元件成为唯一的选中状态,无需手动去取消其它元件的选中状态。比如我们有三个标签,全部选中后右键选中选项组,然后指定组名即可。

然后为为所有选项统一设置选中后的状态

最后为每个标签设置单击事件,动作元件为设置选中即。

指示线的移动

选中标签后,位于标签下方的指示线移动到当前标签的下方,图示中为水平移动,因此指示线的x坐标发生变动,因此只要确定了标签的水平间隔,然后设置移动的x值即可。比如我们添加的指示线的初始位置为(0,31),而三个标签的初始x坐标为0, 123, 249。因此我们在设置指示线到达的位置时,y坐标不变,而x坐标就是三个标签的x坐标。当然,如果指示线的宽度和标签宽度不一致的,且其初始x坐标不为0,则将其初始x坐标加上标签的x坐标即是指示线移动的x坐标。

以上是假设标签位置在最终页面中不会发生移动的情况,当时如果标签位置发生变化,则会出现错乱,如下所示。

由于指示线相对于标签的位置是确定的,刚好位于标签的底边上,因此我们可以用函数获取当前标签的坐标值,指示线的x坐标就是标签的x坐标,指示线的y坐标在标签的y坐标基础上加上标签的高度即可,如果指示线不是正好在标签的底部,只需要加上指示线相对于标签左上角点的偏移即可。

最终效果如下所示。

https://www.axureshop.com/shop/24308中有一些综合实战案例,欢迎大家下载交流学习。


axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (5)
  • lemon_1583160942 普通用户 2020-4-21
    0 引用 6
    谢谢分享,学习了。
  • 不错 普通用户 2020-2-29
    0 引用 5
    感谢分享
  • sosofir 普通用户 2020-2-27
    0 引用 4
    感谢分享
  • 沈十三 管理员 2020-2-22
    0 引用 3
    感谢分享,已获得10金币奖励
  • 沈十三 管理员 2020-2-22
    0 引用 2
    图片无法正常显示,建议重新插入。
返回
axure商城