axure商城

如何利用中继器和动态面板制作一个可以自动化菜单?

本教程通过在中继器中导入页面,实现在二级菜单中自动新增页面对应的菜单,减少重复工作,提高效率。

一、目标

通过在中继器中导入页面,实现在二级菜单中自动新增页面对应的菜单,减少重复工作,提高效率。

二、技能要求

本教程涉及到动态面板、中继器函数函数和axure条件判断的使用,因此建议大家看教程之前先做以下准备:

  • 掌握动态面板使用方法
  • 掌握中继器使用方法
  • 掌握函数使用方法
  • axure事件情形使用方法

当然,如果你不会上面这几项,也不妨碍你继续往下看

三、目的

我设计这个菜单的目的

  • 第一目的:当然是偷懒啊,小学老师说过,偷懒才是创造的原动力
  • 第二目的:解决痛点,让自己爽

于是呢,本着能偷懒绝不多干活的美好愿景,经过本落的努力,终于用axure实现了比较便捷的自动化添加菜单。需要的话拿走不谢!

四、背景

本落之前一直是一个C端产品经理,主要做移动端比较多,后台稍微少一些。今年换工作后,最近比较多的时候都在做web端,管理后台。由于是从0开始,所以,管理后台的菜单越来越多越来越丰富,做原型的时候就有点奔溃。我之前是根据教程做的二级菜单,然后遇到新增一个菜单的时候呢,就比较麻烦了。一天天没完没了的加菜单,一个个加,一个个改菜单名字,一个个的设置链接,然后调整位置层级,真的是烦死了。要是直接在最后一个菜单加还好,在二级菜单加也还勉强忍一忍,但是在中间插入一个新的一级菜单,就得把后面所有的菜单位置都得调整一边,真的是要烦死了!!!不知道有没有戳到大家的痛点。

五、教程

准备事项

1.建好页面,备用

2. 拖1个中继器到画布里,选中中继器,然后在样式-数据里,编辑好一级菜单;一级菜单只做二级菜单的展开收起用,所有直接录入菜单名字就行。二级菜单,对应的列,选择单元格,然后右键引入页面,选择要打开的页面就行

第 1 步 设置二级菜单+交互事件

1.1 双击中继器,进入中继器里面,选中矩形,给矩形命名:一级菜单

1.2 再拖1个新的矩形进入中继器,命名:二级菜单1,设置单击事件,选择单击时打开链接(如果需要的话,你可以设置成在内联框架中打开链接,我就是设置的内联框架中打开,此处请根据个人喜好酌情设置事件类型)。这个时候不用选打开哪个页面,后面用函数设置。看下图,选择【链接到URL或文件路径】

1.3 设置打开当前菜单名称对应的页面
选择函数fx,按下图操作选择元件函数中继器里的函数变量,我的中继器数据排列方式是从左往右,一级菜单,二级菜单1、二级菜单2…这样排列的,所以二级菜单的第一个菜单就选择第二列的表头变量名字那个就行。解释一下,这个事件设置的意思,是希望在单击时打开菜单文本对应的页面,也就是说,你的菜单显示的是二级菜单,点击时就会自动打开二级菜单这个页面。

1.4 接下来,再设置一个载入时事件,载入时,隐藏当前元件。然后启用情形,添加一个判断条件,条件设置成下图所示即可。这里是要解决中继器的一个体验问题。因为实际情况中,二级菜单的数量不一定是相同的。但是中继器有一个毛病,它只按行数展示数据,不管你列里面有没有内容,只要有行,即使是空的也会展示,所以就会出现很多红白列的情况。此处对应的二级菜单少的地方,会展示空白的二级菜单。所以这一步的操作,是要隐藏这些空白菜单

按照以上步骤设置完,这个按钮就可以打开对应的页面了。

1.5 设置完以上事件,按照你需要的二级菜单数量,进行复制粘贴。注意,要按照二级菜单数量的上线复制粘贴。粘贴完记得改一下矩形名字。

1.6 复制粘贴完后,选择所有的二级菜单,设置成动态面板,给动态面板命名,然后隐藏动态面板。选择一级菜单,建一个单击事件,单击是切换二级菜单的动态面板的可见性,效果选择推动和拉动元件。这个菜单不会的,自行百度一下二级菜单怎么做。

第 2 步 数据绑定

2.1.数据绑定,将中继器里的菜单内容,跟一级菜单、二级菜单设置绑定管理。选中中继器(直接新建页面载入时事件也行),新建交互事件,选择载入时事件,载入时设置文本,找到矩形,一级菜单,选择一级菜单后设置文本内容,在文本【值】的下方删掉原来的文本,点击右侧的函数【fx】,设置动态的菜单名字。添加函数的方法跟上面的一样,就不啰嗦了,不会的,往上翻找找,或者自己找一个中继器的教程看看怎么绑定数据。这个时候,去看看你中继器的数据表格里,一级菜单对应的是哪一列,在函数选择是,选对应的表头那列就行。

第 3 步 新增菜单怎么办?

3.1 新增菜单的话,二级菜单数量不增多的情况下,直接在中继器的数据里添加对应的菜单就行。如果二级菜单的数量要新增,按上面的步骤,多复制粘贴几个二级菜单,设置载入事件绑定好数据,就可以了
剩下的,大家可以自行发挥了

最后附上最开始的axure教程示例&原型示例

给TA买糖
共{{data.count}}人
人已赞赏
高级教程

AXURE绘制饼状图教程

2021-9-15 14:37:26

高级教程

Axure教程:通过引用前端JS代码实现浏览器全屏效果

2021-11-13 19:10:24

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

    隐藏空白二级菜单时,用这个条件“如果 文字于 当前==”””实现不了隐藏,可判断菜单值是否为空,如:if “[[Item.Column4]]” == “” 进行实现

    • 落落同学

      不加空格,就是判空,可以隐藏的,你的评论了,你加了空格了,所以应该是判断不了的,你可以看我的示例。你说的方式应该也可以实现,其实本质上用的是一样的原理来判空。我是判断当前这个元件有没有赋值,你是判断元件被赋值的值内容。判断的节点不太一样,一个在前,一个在后,但是判断的都是同一个值。

    • olioli

      感谢回复。重新尝试后,确实是可以的。还想请问下,Axure自带的树状菜单,是否也可以解决您在“四、背景”中说的痛点?

    • 落落同学

      我试了下,交互上达不到我要得菜单效果

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