你是否有過這樣的困擾：每次畫原型遇到 Tab 類型的時候，都需要給每個 Tab 標籤按鈕設置點擊效果後，才能使下方的動態面板進行切換？這裡給你推薦一種方案，利用中繼器實現「絲滑」的 Tab 切換效果。
你是否有過這樣的困擾：每次畫原型遇到 Tab 類型的時候，都需要給每個 Tab 標籤按鈕設置點擊效果後，才能使下方的動態面板進行切換？這裡給你推薦一種方案，利用中繼器實現「絲滑」的 Tab 切換效果。
預覽地址：https://v4qyac.axshare.com
一、初步準備
先準備一個中繼器，將中繼器的布局改為水平（如圖）。
然後在中繼器的下方加入一個動態面板。本次效果共需要3個狀態，可分別在每個動態面板中增加一行文字（Tab_1、Tab_2、Tab_3）用於後續確認切換效果的完成度（如圖）。
在中繼器中，將默認列的名稱改為name，並增加 select、Tab_number 兩列。
中繼器內的數據根據下方截圖進行添加（如圖）。
name 為標籤頁的名稱、select 用於設置Tab項的選中狀態（默認首選項為選中狀態）、Tab_number 用於切換動態面板。
二、互動設計 1. 點擊效果的設置
雙擊中繼器，將中繼器中的矩形設置為100*32、去掉邊框、字體大小改為16、字體顏色改為灰色（用於跟選中效果進行區分），並為矩形增加元件選中的交互樣式，將字色設置為黑色（如圖）。
選擇的Tab項是否為選中狀態由中繼器中的 select 值判斷，所以在點擊每個項時，都需要去更新修改select 的值：
- 為矩形添加單擊時，中繼器更新行的動作（屬性為：已標記、select 列、值為0），因為每次僅有一個Tab可以被選中，所以需要先將select 中的值清空；
- 重新為當前項的 select 賦值，繼續增加中繼器更新行的動作（屬性為：當前、select 列、值為1）（如圖）；
做到這一步，就算是初步完成了點擊時的效果了。當然，現在進行預覽還看不到實際效果。接下來我們繼續優化。
2. 將當前項設置為選中狀態
前面提到過，是否是選中的狀態，交由中繼器中的 select 值進行判斷，所以接下來就要設置中繼器的交互。
因為每項在加載時，我們就要了解該項是否為選中狀態，所以這裡要使用每項加載的事件：
先來設置選中的狀態，為每項加載事件增加一個情形：當 select 的值為1時，才執行的動作（如圖）。
這樣我們便得到了加載到 select 值為「1」時的項，接著為該項設置 標記行（目標：當前中繼器、行：當前）、設置文本內容為 [[Item.name]]、設置選中矩形為「真」（如圖）；
再來設置未選中的狀態，為每項加載事件再增加一個情形：當 select 值為「0」時，才執行的動作（如圖），當然，這次情形里的條件也是可以不用設置的。
接著為值為「0」的項設置動作：標記行（目標：當前中繼器、行：當前）、設置文本內容為 [[Item.name]]、設置選中矩形為「假」（如圖）；
到這裡，便得到了一個跟隨點擊，可以切換點擊效果的 Tab標籤了，但是我們可以看到下方的動態面板還為進行切換，接下來繼續設置。
3. 動態面板切換
動態面板需要跟隨每次的點擊效果，進行狀態的切換。那麼回到矩形的單擊事件上，添加設置面板狀態動作（目標：動態面板、值：[[Item.Tab_number]]）（如圖）；
到此，我們就算是完成了利用中繼器實現Tab切換效果了。
將這種方案保存為自己的組件庫，後續再遇到 Tab切換相關的原型設計時，可以修改下矩形的大小、項的數量、動態面板的大小後便可以直接使用，再也不用為為按鈕設置點擊切換動態面板的工作啦！
演示的效果中，我增加了一個橫條跟隨點擊移動的效果。有想了解橫條移動效果的實現或者想下載這個組件的，可以在文末進行留言。
本文由 @阿幸 原創發布於人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議