Axure教程：如何實現頂部tab式導航欄？

如何實現頂部tab式導航欄？來文中看看~

實現的效果：點擊tab，切換對應的內容頁面，指示標識移動到對應選中tab。

思路：

1. 通過動態面板實現內容頁面切換，n個tab設置n個狀態；
2. 指示標識通過位移，移動到對應的位置；
3. 綁定tab按鈕的點擊事件，設置動態面板的狀態切換，以及指示標識的移動位置。

1、首先，添加頁面佈局，如下圖

2、為動態面板添加

狀態頁面，n個Tab，增加n個狀態頁。我設置了3個Tab，增加了3個對應的狀態頁，並且重命名，命名要容易區分，因為接下來即將對它進行編輯。

為狀態頁面添加內容，為了看出切換效果，每個頁面的內容不要一樣。

準備工作做完，以下即將開始劃重點。

3、為tab按鈕綁定點擊事件

點擊事件有2個：

1. 動態面板狀態切換；
2. 指示標識位置移動。

這個2個事件的沒有順序要求，隨意。

先簡單介紹以下動態面板切換：

為了將tab1和麵板狀態page1關聯，在設置面板狀態時，需要選擇page1，動畫效果和動畫時長按需選擇（同理，如果是tab2，要選擇page2。所以面板狀態的命名要容易識別，用途就在這裡~）如下圖。

重點中的重點，就是元件的位移~

元件位移，在設置用例當中，有個“移動”的操作。選中需要移動的元件——命名為“指示標識”的元件（元件的命名方便在操作元件時快速識別）。

需要編輯設置的條件：參考座標系（相對位置、絕對位置）、位移的位置（x、y）、動畫效果（非必須），如下圖：

名詞釋義：

• 絕對位置：是以當前容器的位置（x，y）作為原點（0，0）；
• 相對位置：是以自己上一次的位置（x，y）作為原點（0，0）。

1）選擇參考座標系

選擇絕對位置。如果設置相對位置，會發現位移的位置產生了神奇的偏差，在原來的位置上，疊加xy的值，比如最初的位置是（2，2），設置位移x=5,y=5，不會移動到（5，5）的位置，而是移動到（7，7）的位置。

2）設置X、Y的位置

先了解一下以下即將用到的函數的含義（以下函數解釋內容來自axure非官方中文網：https://www.axure.com.cn/5068/）

• This ：獲取當前元件對象。當前元件是指當前添加交互動作的元件。
• Target ：獲取目標元件對象。目標元件是指當前交互動作控制的元件。
• width ：獲取元件對象的寬度值。
• height ：獲取元件對象的高度值。
• top ：獲取元件對象的上邊界座標值。
• left ：獲取元件對象的左邊界座標值。
• right ：獲取元件對象的右邊界座標值。
• bottom ：獲取元件對象的下邊界座標值。

以tab1按鈕為例說明以上元件函數的意思，看下圖標註：

tab1按鈕綁定點擊事件，在點擊事件的用例情境裡，tab1是This;

指示標識，是tab1通過點擊事件，需要控制其進行位移操作的，所以是目標元件，即Target；

1. tab1按鈕左邊距離畫布左邊緣的距離：left；
2. tab1按鈕右邊緣距離畫布左邊的距離：right;
3. tab1按鈕上邊緣距離畫布頂部的距離：top；
4. tab1按鈕下邊緣距離畫布頂部的距離：bottom。

瞭解以上函數的含義後，看看我們需要什麼數值， 又可以獲取到什麼數值。

移動指示標識，需要明確每次移動指示標識的x，y。

指示標籤顯示在tab標籤的水平居中位置，指示標識永遠是跟隨tab標籤的，點擊哪個tab標籤跟著移動到哪個tab標籤的下方，可以根據tab標籤的位置，進行計算位置。

（1）先確定指示標籤的y值

因為指示標識是在水平位置上移動，所以y值是固定的，獲取tab標籤的底部位置=tab.bottom；佈局界面中標識和tab之間3個單位的間隔，所以指示標識距離畫布頂部的距離y=tab.bottom+3，即y=This.bottom+3。

（2）x的值稍微複雜一點，由2部分組成：

1. tab標籤左側距離畫布左側的距離=tab.left；
2. tab標籤和指示標識居中顯示時，指示標籤左側距離tab標籤左側的距離=tab標籤寬度的一半減去指示標識寬度的一半，即tab.width/2-指示標籤.width/2；所以指示標籤距離畫布左側的距離x=tab.left+tab.width/2-指示標識.width/2，即x=This.left+This.width/2-Target.width/2。

完美的獲取到了指示標識的x，y值，接下來，就是設置到用例中。點擊fx和fy分別編輯x,y的值，如下圖：

其基本語法是用雙方括號包含，變量值和函數用英文句號連接，例如：[[This. width]] 當前元件的寬度。

變量值和函數不要拼寫錯誤，大小寫不敏感~y值同理。

總結

• tab按鈕添加點擊事件；
• 觸發動態面板切換狀態；
• 指示標識進行位移操作。

元件函數：

• 絕對位置：是以當前容器的位置（x，y）作為原點（0，0）；
• 相對位置：是以自己上一次的位置（x，y）作為原點（0，0）。
• This ：獲取當前元件對象。當前元件是指當前添加交互動作的元件。
• Target ：獲取目標元件對象。目標元件是指當前交互動作控制的元件。
• width ：獲取元件對象的寬度值。
• height ：獲取元件對象的高度值。
• top ：獲取元件對象的上邊界座標值。
• left ：獲取元件對象的左邊界座標值。
• right ：獲取元件對象的右邊界座標值。
• bottom ：獲取元件對象的下邊界座標值。

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

題圖來自Unsplash，基於CC0協議

閱讀更多 人人都是產品經理 的文章

關鍵字: Axure 對應 技術