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

預(yù)覽地址：https://v4qyac.axshare.com

一、初步準(zhǔn)備

先準(zhǔn)備一個(gè)中繼器，將中繼器的布局改為水平（如圖）。

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

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

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

name 為標(biāo)簽頁的名稱、select 用于設(shè)置Tab項(xiàng)的選中狀態(tài)（默認(rèn)首選項(xiàng)為選中狀態(tài)）、Tab_number 用于切換動(dòng)態(tài)面板。

二、交互設(shè)計(jì)

1. 點(diǎn)擊效果的設(shè)置

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

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

• 為矩形添加單擊時(shí)，中繼器更新行的動(dòng)作（屬性為：已標(biāo)記、select 列、值為0），因?yàn)槊看蝺H有一個(gè)Tab可以被選中，所以需要先將select 中的值清空；
• 重新為當(dāng)前項(xiàng)的 select 賦值，繼續(xù)增加中繼器更新行的動(dòng)作（屬性為：當(dāng)前、select 列、值為1）（如圖）；

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

2. 將當(dāng)前項(xiàng)設(shè)置為選中狀態(tài)

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

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

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

這樣我們便得到了加載到 select 值為“1”時(shí)的項(xiàng)，接著為該項(xiàng)設(shè)置 標(biāo)記行（目標(biāo)：當(dāng)前中繼器、行：當(dāng)前）、設(shè)置文本內(nèi)容為 [[Item.name]]、設(shè)置選中矩形為“真”（如圖）；

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

接著為值為“0”的項(xiàng)設(shè)置動(dòng)作：標(biāo)記行（目標(biāo)：當(dāng)前中繼器、行：當(dāng)前）、設(shè)置文本內(nèi)容為 [[Item.name]]、設(shè)置選中矩形為“假”（如圖）；

到這里，便得到了一個(gè)跟隨點(diǎn)擊，可以切換點(diǎn)擊效果的 Tab標(biāo)簽了，但是我們可以看到下方的動(dòng)態(tài)面板還為進(jìn)行切換，接下來繼續(xù)設(shè)置。

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

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

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

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

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