2023年Axure教程：用中繼器制作分級頁面菜單

Axure教程：用中繼器制作分級頁面菜單分級頁面菜單是系統(tǒng)常用的框架，適用于多個頁面對應(yīng)多個子頁面的狀況。那今日就教大家在Axure里如何制作一個分級頁面框架的原型模板。

本原型主要用中繼器制作，由于中繼器制作出來的原型模板，復(fù)用性強，再次使用時只需修改表格內(nèi)容的信息，即可自動生成交互效果，所以我們用一般好用的模板都是用中繼器制作的。制作完成后包括以下效果：

1、點擊左側(cè)父級菜單，可以篩選出該父菜單對應(yīng)的子菜單

2、點擊子菜單，跳轉(zhuǎn)至對應(yīng)的店面

3、點擊返回按鈕，可以重新顯示對應(yīng)的子菜單的列表

案例對應(yīng)的原型地址：/#g=1

那下面我們一起開頭學(xué)習(xí)制作吧。

一、頁面2級菜單卡片

1.材料預(yù)備

頁面2級菜單卡片我們用中繼器制作，包括圖片、文字標簽和矩形（背景），將他們組合在一起，如下圖所示擺放：

背景矩形可以依據(jù)實際需要增加懸停樣式，案例中就增加了淺藍色的懸停樣式。

中繼器表格里共4列內(nèi)容：

menu1：該頁面菜單對應(yīng)的1級菜單的內(nèi)容menu2：該頁面菜單里文本標簽顯示的文字內(nèi)容picture：該頁面菜單里圖片元件顯示的圖片內(nèi)容url：鼠標單擊時跳轉(zhuǎn)的頁面

中繼器表格網(wǎng)格分布，詳細樣式可以依據(jù)實際設(shè)置。

2.交互設(shè)置

中繼器每項加載時，我們用設(shè)置文本的交互，將menu2列對應(yīng)的文字設(shè)置到頁面菜單中繼器里文本標簽的元件；在用設(shè)置圖片的交互，將picture列的圖片值，設(shè)置到頁面菜單中繼器里圖片元件，這樣就完成了傳值。

鼠標單擊中繼器內(nèi)部組合時，我們需要一個內(nèi)聯(lián)框架，我們設(shè)置內(nèi)聯(lián)框架的打開中繼器你內(nèi)部url列對應(yīng)的頁面，并且將內(nèi)聯(lián)框架組合顯示置頂。

二、詳情頁面及內(nèi)聯(lián)框架

詳情頁面就是點擊上面菜單對應(yīng)的頁面，我們在新增頁面里設(shè)置好對應(yīng)的內(nèi)容，通過內(nèi)聯(lián)框架來顯示，上面也提到，鼠標單擊頁面菜單中繼器內(nèi)部組合時，會在內(nèi)聯(lián)框架中打開對應(yīng)的頁面。

內(nèi)聯(lián)框架組合，包括內(nèi)聯(lián)框架和返回按鈕，該組合默認隱蔽，點擊頁面菜單中繼器內(nèi)部組合后才顯示。鼠標單擊返回按鈕時，我們用隱蔽的交互，將該組合隱蔽，這樣就能返回頁面菜單的列表

三、左側(cè)1級菜單

1.材料預(yù)備

左側(cè)1級菜單我們主要用到中繼器（矩形、圖片、和文本標簽）制作，外面加上背景矩形、插畫圖片來美化。中繼器內(nèi)部元件如下圖所示擺放：

中繼器內(nèi)表格共三列內(nèi)容

tu：對應(yīng)菜單項的圖標menu1：菜單的文字內(nèi)容jinyong：對應(yīng)當(dāng)菜單是否被選中

背景的矩形我們增加選中樣式（鼠標移入時灰色）和禁用樣式（鼠標點擊選擇該菜單是藍色）。

這里用選中樣式代替懸停樣式，中繼器里懸停樣式遇到更新行交互會有顯示bug。

2.交互設(shè)置

一級菜單中繼器每項加載時，我們用設(shè)置文本的交互，將menu1列對應(yīng)的文字設(shè)置到中繼器里文本標簽的元件；在用設(shè)置圖片的交互，將tu列的圖片值，設(shè)置到頁面菜單中繼器里圖片元件，這樣就完成了傳值。

考慮到菜單可以沒有圖標的狀況，我們也可以寫一個推斷的交互，就是假如tu列的值不等于空，我們才設(shè)置圖片，假如為空，我們就隱蔽圖片元件。

然后我們通過中繼器表格里jinyong列的值來掌握哪個菜單項被選擇了，一般默認選中第一個。我們設(shè)定假如，禁用列的值等于1，那么就禁用對應(yīng)的背景矩形（禁用后變藍），同時，我們還要對2級頁面菜單中繼器進行篩選，篩選條件2級頁面菜單中繼器menu1的值等于當(dāng)前中繼器當(dāng)前行里mune1列的值。

鼠標移入1級菜單中繼器內(nèi)部元件時，我們用選中的交互，將文本矩形選中，前面我們設(shè)置了選中樣式，就會有個移入變色的效果；鼠標移出時，我們將文本矩形取消選中，這樣就回復(fù)原樣了

在鼠標單擊1級菜單中繼器內(nèi)部元件時，我們其實就是要更新當(dāng)前菜單行jinyong的值，將值更新為1，這樣就可以變色，并且依據(jù)上面，jinyong列的值等于1時，對應(yīng)頁面中繼器進行篩選，就可以看到對應(yīng)的菜單了。不過我們還需要考慮前面有菜單被選中的狀況，所以要先做一個還原的操作，就是把中繼器里全部行jinyong列的值設(shè)置為0，然后再設(shè)置當(dāng)前行的值等于1.

最終，考慮到我們會在詳情頁點擊菜單，所以可以在中繼器重新加載的時候，設(shè)置隱蔽內(nèi)聯(lián)框架組合，這樣就可以顯示對應(yīng)的頁面二級菜單。

這樣我們就完成了二級頁面