axure商城

【Axure 教程】中继器中级教程-左侧导航

相信经过前面的 6 篇入门教程,大家已经对中继器有一定的入门了解,那么今天我们进一步学习如果使用中继器制作我们经常用到的左侧导航

原型展示:https://kz5fi3.axshare.com

所需原件:

  1. 中继器
  2. 文本标签

相信经过前面的 6 篇入门教程,大家已经对中继器有一定的入门了解,那么今天我们进一步学习如何使用中继器制作我们经常用到的左侧导航;

一、导航制作

如上图所示,拖入 6 个文本标签,其中一个作为一级导航默认显示状态,其余 5 个作为二级导航,且设置成组并默认隐藏状态;

同时,在中继器的数据表中进行赋值设置,在这里,我以“N 1”作为一级菜单,“N1_1”作为二级菜单的第一个选项,以此类推来设置其余的 5 个二级菜单;

二、交互设置

如上图所示,我们设置【点击】一级菜单时,切换显示和隐藏二级菜单,同时在更多选项中设置【推拉】下方组件,预览即可看到点击一级菜单时,会展开二级菜单,并使下方的其余菜单往下移动;

三、细节优化

在完成步骤二的交互设置后,我们会发现如果二级菜单为空值,菜单也会展示,这样就无法达到我们预期的理想状态,所以需要为二级菜单增加【载入时】如果二级菜单为空值,那么隐藏该菜单,且拉起下方组件,如上图的设置所示;

此外,我们需要为二级菜单设置一个选中状态,并在点击时将该二级菜单设置为选中;

设置完成后,我们选中所有二级菜单并将它们设置为【二级菜单】的选项组,这样就可以让我们在做二级菜单的选中时,达到“单选”的效果;


更多内容,微信搜索“爱学儿”,一起交流探讨吧!

给TA买糖
共{{data.count}}人
人已赞赏
软件资讯

Axure中文网恢复投稿 以及现金稿费奖励机制

2021-5-25 9:45:58

基础教程软件资讯

使用Axure设计工具提升效率的8个技巧

2021-7-5 17:07:28

axure商城
14 条回复 A文章作者 M管理员
  1. zmykzjx

    用的axure8 始终没看懂“二级菜单为空值,那么隐藏该菜单”是如何设置的😭

    • SamDesigner

      设置情形:If [Item.N1_1] 的值为“空(不填内容)”,那么隐藏当前组件,且拉动下方组件

    • zmykzjx

      感谢老师,设置在二级菜单交互的“显示”上可以了。非常感谢😁😊

    • gentle

      老师好,我用的Axure9,无论怎么调试情形,都没办法隐藏没有数据的矩形,只能把数据隐藏掉,请问是我的版本有问题吗?

    • SamDesigner

      欢迎微信关注爱学儿通过图文方式交流解答,谢谢理解

  2. 🐻大笨钟

    三级菜单怎么实现,求教

    • SamDesigner

      三级的设置方式跟二级的差不多,我今晚再发布一遍结构树的教程,跟三级菜单原理是一样的,可以留意一下。: )

  3. 张丽娇

    只能说这种方法可以实现效果,无法实现真正的动态数据

    • SamDesigner

      怎么理解“无法实现真正的动态数据”?我个人认为是可以的喔

    • SamDesigner

      我好像有点理解了,您的意思是,如果你的二级菜单多于 5 个,还需要再次调整的意思吧?或许,两个中继器组合一起来用,就可以解决这个问题,可以尝试一下

    • SamDesigner

      刚看了一下,中继器内禁止嵌套中继器,这条路走不通,所以,暂时没有别的更好的方法了,建议就是先给二级菜单设置一个最大值,比如 10 个,那么还是比较通用的,根据实际使用场景进行灵活调整吧

  4. 张丽娇

    怎么设置二级菜单的值呢?

    • SamDesigner

      “N1”是一级菜单的值,“N1_1”、“N1_2”、“N1_3”、“N1_4”、“N1_5”就是对应的二级的值

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索