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

一、目标

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

二、技能要求

本教程涉及到动态面板、中继器函数函数和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教程示例&原型示例