本文我們嘗試換一個思路來完成3級菜單，該思路兩樣適用于制作2級菜單，甚至更多層級的菜單。同時，對于后期需要調整菜單結構，添加新的菜單等，都比較方便。

• 提示1：本篇教程可能不太適合新手，以及不了解中繼器、全局變量、系統變量等使用的…新手；
• 提示2：文字其實不多，截圖太多，所以看上去很長，也可直接翻到末尾查看所有的用例，其實并不多。

之前有介紹過使用中繼器制作2級菜單，可以看出，使用中繼器完成類似的多重復列表時比較便捷，至少比在N層動態面板來回切不斷復制要輕松一些。

這回我們嘗試換一個思路來完成3級菜單，該思路兩樣適用于制作2級菜單，甚至更多層級的菜單。同時，對于后期需要調整菜單結構，添加新的菜單等，都比較方便。

先看效果（以省、市、區三級聯動為藍本）：

寫在前面：原型只是過渡型產物，不是最終產品，實際工作過程中沒必要死磕，能做到表述清晰即可，最好的原型是溝通，是溝通，是溝通?。?！本文更多的是站在興趣愛好，及加強基礎邏輯能力角度，做了一些簡單的思考及嘗試，與大家一起分享共同交流。

以下為制作過程：

1、概況

指導思路

菜單展示 —— 父級菜單永遠排在子級菜單前面 —— 排序

菜單展開/收縮 —— 篩選/取消篩選

所需元件

• 中繼器 * 1
• 該中繼器下面的元件
• 矩形 * 1：命名為“區域”
• icon * 1 ：展開/收縮圖標 ，命名為“展開標識”
• 中繼器外部的元件
• 矩形 * 2： 控制展開動作、控制收縮動作

涉及交互事件（用例）：

• 中繼器用例：載入時
• 中繼器用例：每項加載時
• 矩形用例：鼠標單擊時
• 涉及動作：
• 添加排序（中繼器）
• 添加篩選（中繼器）
• 更新行（中繼器）
• 設置文本
• 設置尺寸
• 隱藏（元件）
• 設置選中狀態
• 旋轉（元件）
• 觸發事件

涉及函數及變量

• 全局變量 * 2- 命名為：ID1、ID2，默認值為空。用于記錄被點擊菜單的父級菜單、父父級菜單
• Target：目標元件
• width：元件寬度
• height：元件高度

涉及動畫

無（最好不要動畫）

注意操作

用例的判斷條件

2、素材制作

（1）拖入一個中繼器，設置中繼器的行距為10（單擊中繼器，右側樣式最下選擇“間距”進行設置）。

雙擊中繼器，進入中繼器內部設置。

拖入一個矩形，命名為“區域”：

• 設置（默認）寬高為：300*40；
• 設置（默認）線段顏色為F2F2F2；
• 右鍵矩形“區域”，進入交互樣式，
• 設置鼠標懸停時填充顏色為F2F2F2；
• 鼠標按下時填充顏色為E4E4E4；
• 選中時填充顏色為CCCCCC。

拖入icon – 向右單角符，命名為“展開標識”：設置填充顏色為999999。

（2）拖入矩形，命名為“展開”，樣式隨便設置 —— 后面的觸發事件需要用到，樣式不重要。

（3）拖入矩形，命名為“收縮”，樣式隨便設置 —— 后面的觸發事件需要用到，樣式不重要 。

設置好之后大概長下面這個樣子：

注意：預覽效果中應將元件“展開”“收縮”隱藏，用戶不需要看到

3、中繼器數據

按以下屬性表規格為中繼器填入數據：

（圖1）

字段說明：

（1）type – 菜單類型，用于區分層級：

值域：

1. 一級菜單 —— 此處指“省”
2. 二級菜單?—— 此處指“市”
3. 三級菜單?—— 此處指“區”

（2）ID – 菜單ID值，此處主要用于排序，需要按命名規則進行命名

命名規則：由ID1、ID2、ID3組合而成的至少6位正整數。

ID1（1位）+ID2（2位）+ID3（3位）

例如：ID1為1，ID2為2，ID3為3，則ID值為102003—— 中繼器加載時進行一次排序，就可以保證按照想要的樹結構來展現了。

（3）ID1、ID2、ID3

1. ID1：一級菜單編號，不可為0
2. ID2：二級菜單編號，可為0，一級菜單該值為0
3. ID3：三級菜單編輯，可為0，一二級菜單該值為0

（4）name – 菜單名稱

（5）eye – 菜單是隱藏，或是否可見，作為后續中繼器篩選動作的篩選條件

值域：

• 1：顯示
• 0：隱藏

默認情況下除一級菜單之外的菜單都是被折疊的（即不可見），所以，示例中的兩個一級菜單：江西、浙江，基（默認）eye值為1。

（6）xuan – 菜單是展開情況，用于控制元件“展開標識”的旋轉情況、及記錄當前菜單的展開狀態

值域：

• 1：展開
• 0：未展開

可延展：

1. 如果需要更多的菜單（省市區），按照該形式繼續添加即可。
2. 如果需要改為其他的類型（比如商品三級分類），修改一下name值即可。

4、交互設計

1. 中繼器部分

（1）中繼器加載數據 —— 用例：每項加載時

賦值及調整菜單樣式：

第1個動作：設置元件“區域”上的文字等于中繼器的屬性name值。

（圖2）

第2個動作：設置（調整）元件“區域”的尺寸 – 不同類型的菜單樣式上做區別。

（圖3）

說明：

• [[Target.width – 20 * (item.type – 1) ]] ：根據菜單的類型設置其寬度，即子菜單相較父級菜單寬度小20像素；
• [[Target.height]]：高度不變，即所有菜單的高度都相同。

錨點，選擇右側，目的是為了右邊對齊——可以根據實際情況自行調整。

三級目錄不需要“展開標識” – 三級目錄不再再展開，所以不需要。

設置判斷條件：當菜單類型為三級菜單時

（圖4）

隱藏“展開標識”：

（圖5）

展開/未展開樣式：

a. 展開時

判斷條件，[[item.xuan]]等于1，代表是展開狀態。

（圖6）

第1個動作：設置元件“區域”為選中狀態 —— 進而其選中的樣式就體現出來了。

（圖7）

第2個動作：設置元件“展開標識”由原來的向右，變成向下 —— 圍繞元件中心旋轉到90度。

（圖8）

注意：

1. 此處使用的是絕對角度，不是相對角度，原因：相對角度容易出錯。
2. 不要使用動畫，原因：中繼器的篩選、排序、更新等，都會將所有的項都重新加載一遍，所以執行以上動作之后，可能會出現N個元件同時都在旋轉的情況。
3. 結合前2點，所以方向是順時針或逆時針都可以。

b. 未展開時

判斷條件，[[item.xuan]]等于0，代表是未展開狀態。

（圖9）

第1個動作：設置元件“區域”為未選中狀態 —— 進而就恢復其默認樣式。

（圖10）

第2個動作：設置元件“展開標識”恢復默認狀態 – 旋轉角度為0。

（圖11）

注意：

• 1-1-3的兩個用例，其關系為：if…else if，即，最多只執行其中一個用例
• 1-1-1、1-1-2、1-1-3之間是平行的，依次都會執行

設置好之后的情況如下：

（圖12）

（2）中繼器載入時，添加排序及篩選

第1個動作：添加排序 – 按ID值升級排列 —— 結合ID的命名規則，可保證按預期的順序顯示菜單。

（圖13）

第2個動作：添加篩選 – 只顯示狀態為顯示（eye=1）的的項。

（圖14）

設置好之后的情況如下：

（圖15）

以上步驟完成之后先看一下預覽效果，應如下：

（圖16）

2. 中繼器內部操作 – 元件“區域”的交互

我們希望在點擊元件“區域”時，自動展開/收縮其子菜單。

細分下來為：

1. 無子菜單時，即，點擊的是三級菜單，什么都不做；
2. 點擊的是二級菜單時，展開/收縮其下的三級菜單；
3. 點擊的是一級菜單時，展開其下的二級菜單（不展開三級菜單）或 收縮其下所有的二級菜單及三級菜單；
4. 按以上思路，進行用例設計。

2-1 記錄上級菜單，給全局變量ID1、ID2賦值

（圖17）

2-2 根據當前展開狀態，執行展開或收縮動作

2-2-1 展開

第1步，添加判斷條件：該菜單為未展開狀態，且不是三級菜單時。

（圖18）

說明：

• [[item.xuan]]==0：未展開狀態
• [[item.type]]!=3：不是三級菜單

第2步：更新中繼器（下的屬性值），動作“更新行”，設置（該行的）xuan值為1。

（圖19）

第3步：觸發展開事件 – 具體展開的用例情況，下文中會有介紹。

（圖20）

2-2-1 收縮

第1步，添加判斷條件：該菜單為展開狀態，且不是三級菜單時。

（圖21）

第2步：更新中繼器（下的屬性值），動作“更新行”，設置（該行的）xuan值為0。

（圖22）

第3步：觸發收縮事件 – 具體收縮的用例情況，下文中會有介紹。

（圖23）

注意：

• 展開、收縮用例是最多只執行一個就夠了的，所以其結構為if……else if
• 觸發事件時，不要忘了勾選具體哪個動作（往往會點擊了元件，忘了勾選哪個動作）

3. 中繼器外部操作 – 元件“展開”、“收縮”的交互用例

為什么不直接放到用例“每項加載時”？

前面說過，中繼器的執行原理（至少8.0差不多是這樣），當有排序、篩選、更新、刪除等動作時，會將所有的項都重新加載一遍，所以如果將對中繼器的更新等動作，放在“每項加載時”很容易造成死循環，從而不產生任何效果。

3-1 元件“展開”的用例設計

3-1-1 展開的是一級菜單

第1步，添加判斷條件：全局變量ID2=0—— 我們在點擊“區域”元件時，會先對ID1、ID2進行賦值操作。

（圖24）

第2步：執行展開動作 – 通過更新行值實現（然后會自動觸發中繼器“載入時”的動作）。

（圖25）

說明：

• [[(item.ID1 == ID1)&&(item.type == ‘2’)]]：定位到該一級菜單下的所有二級菜單。
• eye = 1，將符合匹配條件的項的eye值更新為1，即顯示狀態。

3-1-2 展開的是二級菜單

第1步，配置判斷條件。

因為與3-1-1為if…else if關系，所以此處的判斷條件可以寫為 else if true。

操作方法：右鍵相應動作（示例為“鼠標單擊時”）選擇“添加用例”即可，默認條件即為else if true。

（圖26）

第2步，執行展開動作 – 通過更新行值實現。

（圖27）

說明：

與一級菜單的菜單匹配條件有區別，匹配條件公式為：[[(item.ID1 == ID1)&&(item.ID2 == ID2)&&(item.type == ‘3’)]]。

設置好之后的情況如下：

（圖28）

3-2 元件“收縮”的用例設計

3-2-1 收縮一級菜單

（圖29）

說明：

• [[(item.ID1 == ID1) && (item.type != 1)]]：定位到該一級菜單下的所有二、三級菜單（不能包括自己）；
• eye = 0，將符合匹配條件的項的eye值更新為0，即隱藏狀態；
• xuan = 0，將符合匹配條件的項的xuan值更新為0，即不展開狀態（父級菜單收縮后，所有的子菜單都為收縮狀態）。

3-2-1 收縮二級菜單

（圖30）

說明：

與一級菜單的菜單匹配條件有區別，匹配條件公式為：[[(item.ID1 == ID1)&&(item.ID2 == ID2)&&(item.type == 3)]]，定位到該二級菜單下的所有三級菜單（不能包括自己）。

設置好之后的情況如下：

（圖31）

以上，所有的交互都設計完成，再核對一下用例情況。

（圖32）

最后，因為元件“展開”“收縮”不需要在前臺顯示，所以將這兩個元件隱藏即可（不影響交互效果）

OK，來預覽一下，看看效果出來了嗎？

原型預覽地址：?https://e881q6.axshare.com

有任何問題歡迎在評論中指出！

本文由 @?牧逸 原創發布于人人都是產品經理。未經許可，禁止轉載

?題圖來自Unsplash，基于CC0協議