如何讓三級菜單和標簽頁實現交互，筆者在此給出了一個教程，簡單快捷的原型在向你招手~~

今天，教大家如何做一個框架，包含三級菜單和標簽頁兩部分內容，以及他們之間相互交互的內容。

效果如下圖所示：

在線演示地址

一、效果介紹

1. 左邊菜單欄，最多有三級菜單，可以通過菜單中繼器維護，使用方便。
2. 點擊菜單，如果有子菜單會展開或收起子菜單；如果沒有子菜單，自動新增標簽頁，并打開對應頁面（不會重復生成標簽）。
3. 點擊不同的標簽頁，切換不同的頁面。
4. 刪除所有標簽頁，自動跳轉到首頁。

二、使用方法

本模板使用簡單，已制作好交互效果，只需要填寫“菜單中繼器”的內容即可直接使用。

• menu1：填寫一級菜單的名稱；
• menu2：填寫二級菜單的名稱（需要在一級菜單處先寫該二級菜單的一級菜單名稱）；
• menu3：填寫三級菜單的名稱（需要在一、二級菜單處先寫該三級菜單的一、二級菜單名稱）；
• picture：菜單文字前面的圖標，可上傳圖片；
• see：1位載入時可見，0為隱藏；一般只有一級菜單填1，其他為0；
• xiala：如果有子菜單，填1；如果沒有，填0；
• xuan：填寫默認值0即可；
• jinyong：填寫默認值0即可。

三、制作方法

1. 用中繼器制作三級菜單

1）設置中繼器內的表格

• menu1：填寫一級菜單的名稱；
• menu2：填寫二級菜單的名稱（需要在一級菜單處先寫該二級菜單的一級菜單名稱）；
• menu3：填寫三級菜單的名稱（需要在一、二級菜單處先寫該三級菜單的一、二級菜單名稱）；
• picture：菜單文字前面的圖標，可上傳圖片；
• see：1位載入時可見，0為隱藏；一般只有一級菜單填1，其他為0；
• xiala：如果有子菜單，填1；如果沒有，填0；
• xuan：填寫默認值0即可，既下拉箭頭向下；如果需要默認打開下拉菜單，箭頭向右，填1；
• jinyong：填寫默認值0即可，用于判斷是否選中。

2）中繼器材料

三個組合：

1. 一級組合（文本標簽+矩形+圖片+下拉標志）；
2. 二級組合（文本標簽+矩形+圖片+下拉標志）；
3. 三級組合（文本標簽+矩形+圖片）。

3）中繼器內邏輯

①點擊一級菜單：

• 收起狀態：如果有子菜單，打開子菜單；如果沒有子菜單，打開該名稱的頁面。
• 展開狀態：收起子菜單。

②點擊二級菜單:

• 收起狀態：如果有子菜單，打開子菜單；如果沒有子菜單，打開該名稱的頁面。
• 展開狀態：收起子菜單。

③點擊三級菜單，打開該名稱的頁面。

具體邏輯如下圖所示：

2. 用中繼器制作標簽頁

1）設置中繼器內的表格

• column0：標簽頁名稱，默認給一個首頁；
• xuanzhong：1打開對應頁面，0不打開。

2）中繼器材料

1個好看的標簽矩形，刪除“x”形狀。

3）中繼器內邏輯

點擊標簽矩形，取消選中其他標簽，選中該標簽并打開對應頁面。

點擊“x”，刪除該標簽，自動選擇下個標簽，并打開選中標簽的頁面。如果所有標簽被刪除，自動生成一個首頁標簽，并打開首頁。

具體邏輯如下圖所示：

3. 制作對應頁面

頁面名稱要和菜單中繼器內名稱相同（沒有子菜單的菜單），然后在對應頁面制作對應內容即可。

4. 制作菜單與標簽頁的交互

點擊沒有子菜單的菜單時，記錄該菜單文字，判斷是否有該標簽頁。如果有，選中并打開該標簽頁；如果無，新建標簽頁并打開對應頁面。

具體邏輯如下圖所示：

總結

該原型非常實用，但制作相對復雜，新手不容易完成。

制作完成后，以后使用方便，僅需簡單填寫菜單中繼器的內容，即可擁有完美的效果，所以強烈推薦給各位使用。

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

題圖來自Unsplash，基于CC0協議