Axure高級教程：用中繼器做下拉菜單

今天和大家分享一箇中繼器的高級教程——用中繼器來做下拉菜單。

一、為什麼要用中繼器做下拉菜單

開始教學之前，我們先來探討一下為什麼要用中繼器來做下拉菜單。

首先，市面上的下拉菜單的教程都是用動態面板來做的，通過隱藏的拉動和顯示的推動來實現菜單效果的；這樣做看是沒有問題，但是用起來非常不方便。

為什麼呢？

• 動態面板做的相當於寫死了，你有10個菜單，你就要用10個矩形來畫10次；
• 如果想改變菜單的尺寸、顏色等樣式，那就需要改10次；
• 設置菜單跳轉交互，需要設置10次，而且還要到不同的動態面板，非常麻煩；這樣導致浪費了很多的時間，導致製作出來的元件複用性低。

所以作者就用中繼器做了一個下拉菜單原型，只需要填寫中繼器表格即可自動生成交互，而且修改尺寸尺寸樣式也只需要修改一次；非常的方便快捷，做好之後複用性極強，所以強烈推薦給大家使用。

二、原型效果預覽

下面是做好的下拉菜單的效果，你們也可以自行體驗哈。

原型演示地址：https://lbligu.axshare.com/#g=1

三、製作材料

中繼器×1，圖片元件×1，右箭頭x1，矩形×1，內聯框架×1。

中繼器內元件如下圖擺放，組成一個組合

四、中繼器表格設置

picture代表中繼器前面的圖標，如有需要，右鍵導入圖片即可。

menu1代表該行菜單的一級菜單（一級菜單的menu1和menu2的值是一樣的）。

menu2代表二級菜單（本教程以二級菜單為案例，如需要二級以上的可以用同樣的思路來製作）。

you代表右箭頭，我們如果有下拉菜單，填寫1，如果沒有為空即可。下面我們會詳細介紹該交互。

xianshi代表該菜單是否顯示，1代表顯示，如果不默認顯示則為空，一級菜單必須要為1。

true：是否選中該矩形，我們需要先給矩形選中時一個顏色。

url：代表跳轉鼠標單擊時跳轉的頁面，右鍵導入頁面即可。

五、交互設置1. 中繼器每項加載時

設置文本：讓矩形文本=item.menu2。

如果右不等於1，我們就隱藏右箭頭。

如果圖片為空，隱藏圖片；否則，設置圖片的值為item.picture。

如果顯示不等於1，隱藏整個菜單組合。

如果true=1，選中矩形。

2. 鼠標單擊菜單組合時

這裏需要分兩種情況：

第一種情況是you==1，這種代表該菜單有子菜單，所以我們需要將子菜單顯示出來。

這裏我們需要先將其他子菜單先隱藏，如果菜單少的話可以不做這不操作；不過作者做過的項目基本都是這個邏輯，所以首先要更新行，條件是you不等於1，將這些菜單的item.xian設為0，這樣相當於將所有子菜單隱藏。

然後在更新行，和單擊菜單同一個menu1的item.xian設為1，這樣單擊菜單的所有子菜單都會顯示出來。

第二種情況就是you不等於1，這是代表沒有下級菜單了，所有我們就在內聯框架打開url對應的頁面即可。

這裏為了更加美觀，我們會設置該菜單為選中變色；所以用更新行的操作，首先將全部行的true更新為0，再更新該行菜單的true值為0即可。

以上就是本期分享的全部內容，謝謝閲讀。

本文由 @做產品但不是經理 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。