你是否有過這樣的困擾：每次畫原型遇到 Tab 類型的時候，都需要給每個 Tab 標簽按鈕設置點擊效果后，才能使下方的動態(tài)面板進行切換？這里給你推薦一種方案，利用中繼器實現(xiàn)“絲滑”的 Tab 切換效果。

預覽地址：https://v4qyac.axshare.com

一、初步準備

先準備一個中繼器，將中繼器的布局改為水平（如圖）。

然后在中繼器的下方加入一個動態(tài)面板。本次效果共需要3個狀態(tài)，可分別在每個動態(tài)面板中增加一行文字（Tab_1、Tab_2、Tab_3）用于后續(xù)確認切換效果的完成度（如圖）。

在中繼器中，將默認列的名稱改為name，并增加 select、Tab_number 兩列。

中繼器內的數(shù)據(jù)根據(jù)下方截圖進行添加（如圖）。

name 為標簽頁的名稱、select 用于設置Tab項的選中狀態(tài)（默認首選項為選中狀態(tài)）、Tab_number 用于切換動態(tài)面板。

二、交互設計

1. 點擊效果的設置

雙擊中繼器，將中繼器中的矩形設置為100*32、去掉邊框、字體大小改為16、字體顏色改為灰色（用于跟選中效果進行區(qū)分），并為矩形增加元件選中的交互樣式，將字色設置為黑色（如圖）。

選擇的Tab項是否為選中狀態(tài)由中繼器中的 select 值判斷，所以在點擊每個項時，都需要去更新修改select 的值：

• 為矩形添加單擊時，中繼器更新行的動作（屬性為：已標記、select 列、值為0），因為每次僅有一個Tab可以被選中，所以需要先將select 中的值清空；
• 重新為當前項的 select 賦值，繼續(xù)增加中繼器更新行的動作（屬性為：當前、select 列、值為1）（如圖）；

做到這一步，就算是初步完成了點擊時的效果了。當然，現(xiàn)在進行預覽還看不到實際效果。接下來我們繼續(xù)優(yōu)化。

2. 將當前項設置為選中狀態(tài)

前面提到過，是否是選中的狀態(tài)，交由中繼器中的 select 值進行判斷，所以接下來就要設置中繼器的交互。

因為每項在加載時，我們就要了解該項是否為選中狀態(tài)，所以這里要使用每項加載的事件：

先來設置選中的狀態(tài)，為每項加載事件增加一個情形：當 select 的值為1時，才執(zhí)行的動作（如圖）。

這樣我們便得到了加載到 select 值為“1”時的項，接著為該項設置 標記行（目標：當前中繼器、行：當前）、設置文本內容為 [[Item.name]]、設置選中矩形為“真”（如圖）；

再來設置未選中的狀態(tài)，為每項加載事件再增加一個情形：當 select 值為“0”時，才執(zhí)行的動作（如圖），當然，這次情形里的條件也是可以不用設置的。

接著為值為“0”的項設置動作：標記行（目標：當前中繼器、行：當前）、設置文本內容為 [[Item.name]]、設置選中矩形為“假”（如圖）；

到這里，便得到了一個跟隨點擊，可以切換點擊效果的 Tab標簽了，但是我們可以看到下方的動態(tài)面板還為進行切換，接下來繼續(xù)設置。

3. 動態(tài)面板切換

動態(tài)面板需要跟隨每次的點擊效果，進行狀態(tài)的切換。那么回到矩形的單擊事件上，添加設置面板狀態(tài)動作（目標：動態(tài)面板、值：[[Item.Tab_number]]）（如圖）；

到此，我們就算是完成了利用中繼器實現(xiàn)Tab切換效果了。

將這種方案保存為自己的組件庫，后續(xù)再遇到 Tab切換相關的原型設計時，可以修改下矩形的大小、項的數(shù)量、動態(tài)面板的大小后便可以直接使用，再也不用為為按鈕設置點擊切換動態(tài)面板的工作啦！

演示的效果中，我增加了一個橫條跟隨點擊移動的效果。有想了解橫條移動效果的實現(xiàn)或者想下載這個組件的，可以在文末進行留言。