如何利用中繼器和動態面板制作一個可以自動化菜單？

一、目標

通過在中繼器中導入頁面，實現在二級菜單中自動新增頁面對應的菜單，減少重復工作，提高效率。

二、技能要求

本教程涉及到動態面板、中繼器函數函數和axure條件判斷的使用，因此建議大家看教程之前先做以下準備：

• 掌握動態面板使用方法
• 掌握中繼器使用方法
• 掌握函數使用方法
• axure事件情形使用方法

當然，如果你不會上面這幾項，也不妨礙你繼續往下看

三、目的

我設計這個菜單的目的

• 第一目的：當然是偷懶啊，小學老師說過，偷懶才是創造的原動力
• 第二目的：解決痛點，讓自己爽

于是呢，本著能偷懶絕不多干活的美好愿景，經過本落的努力，終于用axure實現了比較便捷的自動化添加菜單。需要的話拿走不謝！

四、背景

本落之前一直是一個C端產品經理，主要做移動端比較多，后臺稍微少一些。今年換工作后，最近比較多的時候都在做web端，管理后臺。由于是從0開始，所以，管理后臺的菜單越來越多越來越豐富，做原型的時候就有點奔潰。我之前是根據教程做的二級菜單，然后遇到新增一個菜單的時候呢，就比較麻煩了。一天天沒完沒了的加菜單，一個個加，一個個改菜單名字，一個個的設置鏈接，然后調整位置層級，真的是煩死了。要是直接在最后一個菜單加還好，在二級菜單加也還勉強忍一忍，但是在中間插入一個新的一級菜單，就得把后面所有的菜單位置都得調整一邊，真的是要煩死了?。?！不知道有沒有戳到大家的痛點。

五、教程

準備事項

1.建好頁面，備用

2. 拖1個中繼器到畫布里，選中中繼器，然后在樣式-數據里，編輯好一級菜單；一級菜單只做二級菜單的展開收起用，所有直接錄入菜單名字就行。二級菜單，對應的列，選擇單元格，然后右鍵引入頁面，選擇要打開的頁面就行

第 1 步 設置二級菜單+交互事件

1.1 雙擊中繼器，進入中繼器里面，選中矩形，給矩形命名：一級菜單

1.2 再拖1個新的矩形進入中繼器，命名：二級菜單1，設置單擊事件，選擇單擊時打開鏈接（如果需要的話，你可以設置成在內聯框架中打開鏈接，我就是設置的內聯框架中打開，此處請根據個人喜好酌情設置事件類型）。這個時候不用選打開哪個頁面，后面用函數設置?？聪聢D，選擇【鏈接到URL或文件路徑】

1.3 設置打開當前菜單名稱對應的頁面
選擇函數fx，按下圖操作選擇元件函數中繼器里的函數變量，我的中繼器數據排列方式是從左往右，一級菜單，二級菜單1、二級菜單2…這樣排列的，所以二級菜單的第一個菜單就選擇第二列的表頭變量名字那個就行。解釋一下，這個事件設置的意思，是希望在單擊時打開菜單文本對應的頁面，也就是說，你的菜單顯示的是二級菜單，點擊時就會自動打開二級菜單這個頁面。

1.4 接下來，再設置一個載入時事件，載入時，隱藏當前元件。然后啟用情形，添加一個判斷條件，條件設置成下圖所示即可。這里是要解決中繼器的一個體驗問題。因為實際情況中，二級菜單的數量不一定是相同的。但是中繼器有一個毛病，它只按行數展示數據，不管你列里面有沒有內容，只要有行，即使是空的也會展示，所以就會出現很多紅白列的情況。此處對應的二級菜單少的地方，會展示空白的二級菜單。所以這一步的操作，是要隱藏這些空白菜單

按照以上步驟設置完，這個按鈕就可以打開對應的頁面了。

1.5 設置完以上事件，按照你需要的二級菜單數量，進行復制粘貼。注意，要按照二級菜單數量的上線復制粘貼。粘貼完記得改一下矩形名字。

1.6 復制粘貼完后，選擇所有的二級菜單，設置成動態面板，給動態面板命名，然后隱藏動態面板。選擇一級菜單，建一個單擊事件，單擊是切換二級菜單的動態面板的可見性，效果選擇推動和拉動元件。這個菜單不會的，自行百度一下二級菜單怎么做。

第 2 步 數據綁定

2.1.數據綁定，將中繼器里的菜單內容，跟一級菜單、二級菜單設置綁定管理。選中中繼器（直接新建頁面載入時事件也行），新建交互事件，選擇載入時事件，載入時設置文本，找到矩形，一級菜單，選擇一級菜單后設置文本內容，在文本【值】的下方刪掉原來的文本，點擊右側的函數【fx】，設置動態的菜單名字。添加函數的方法跟上面的一樣，就不啰嗦了，不會的，往上翻找找，或者自己找一個中繼器的教程看看怎么綁定數據。這個時候，去看看你中繼器的數據表格里，一級菜單對應的是哪一列，在函數選擇是，選對應的表頭那列就行。

第 3 步 新增菜單怎么辦？

3.1 新增菜單的話，二級菜單數量不增多的情況下，直接在中繼器的數據里添加對應的菜單就行。如果二級菜單的數量要新增，按上面的步驟，多復制粘貼幾個二級菜單，設置載入事件綁定好數據，就可以了
剩下的，大家可以自行發揮了

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