編輯導(dǎo)語：穿梭框我們都不模式，它是一種常用的選擇器。今天，本文作者通過實際的操作實踐，為我們分享了如何用中繼器做出一個高保真的穿梭框原型。

穿梭框是常用的一個選擇器，它使用直觀方式在左右列表框移動數(shù)據(jù)，實現(xiàn)數(shù)據(jù)的多項選擇。

所以今天和大家分享如何用中繼器做一個高保真的穿梭框原型，本教程主要是講解兩個中繼器的聯(lián)動交互，屬于中高級教程。

原型預(yù)覽地址：https://yu1cwx.axshare.com

一、材料準(zhǔn)備

中繼器（內(nèi)含矩形）*2；背景框*2；左箭頭*1；右箭頭*2；文本*2，如下圖所示擺放：

中繼器內(nèi)的矩形需要取消邊框，然后設(shè)置鼠標(biāo)移入時填充顏色為灰色，選中時填充顏色為藍(lán)色，這樣會有更好的交互感。背景框置于底層，調(diào)整合適的大小和位置即可。

左邊的為未選項中繼器1，在中繼器表格內(nèi)填寫對應(yīng)選項文字；然后復(fù)制到右面，為已選項中繼器2，由于已選項默認(rèn)為0，所以需要刪除中繼器所有行，默認(rèn)空值即可。

中繼器1和2均需取消隔離選項組和隔離單選按鈕組效果，兩個中繼器內(nèi)的矩形需要設(shè)置單選組。文本元件命名為邏輯1和邏輯2，默認(rèn)為空且隱藏，后續(xù)用于邏輯交互。

二、交互設(shè)置

中繼器1每項載入時：設(shè)置中繼器1內(nèi)矩形文字為列表Column0的值，這個交互是中繼器默認(rèn)設(shè)置的。

中繼器1內(nèi)矩形鼠標(biāo)單擊時：選中當(dāng)前元件：因為之前我們設(shè)置了選中的顏色變藍(lán)，所以這樣做以后，就可以知道選中了那一項，而且因為設(shè)置了單選組，所以也不會同時選中多個。

設(shè)置邏輯1的文本為列表Column0的值：這里其實就是把選中的值記錄下來，方便后面左右箭頭穿梭的操作。

中繼器2每項加載時及內(nèi)部矩形鼠標(biāo)單擊時：交互和中繼器1一致，不過需要注意的是，中繼器2里面設(shè)置的文本是邏輯2的文本。

右箭頭鼠標(biāo)單擊時：這里需要判斷邏輯1的文字是否為空，如果為空就是還沒選中，就不發(fā)生交互，如果不為空，就需要做一個增加行和刪除行的交互。

• 增加行：在中繼器2里增加行，增加的值為邏輯1文本值；
• 刪除行：刪除中繼器1里的和邏輯1文本值相同的行。

完成上述兩個交互之后，我們還需要清空邏輯1的文本，因為如果不清空，我們點右箭頭就可以無限增加同一個選項，所以這里需要清空邏輯1的文本值。

左箭頭鼠標(biāo)單擊時：左箭頭和右箭頭的交互其實是一個道理的，首先需要判斷邏輯2的文本是否為空，如果為空就是還沒選中，就不發(fā)生交互，如果不為空，就需要做一個增加行和刪除行的交互，不過這里和中繼器1的交互是反過來的。

• 增加行：在中繼器1里增加行，增加的值為邏輯2文本值；
• 刪除行：刪除中繼器2里的和邏輯2文本值相同的行。

設(shè)置邏輯2的文本值為空值，那這樣一個實用的穿梭框原型就制作完成了。完成之后，以后我們需要使用的話，只需要填寫在左邊中繼器1的表格里填寫選項文字即可，方便使用，小提示，如果選項多的話可以在excel表格復(fù)制粘貼到中繼器表格里哦

那么以上就是本期的全部內(nèi)容了，我們下期見，88~

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。