穿梭框是常用的一個選擇器，它使用直觀方式在左右列表框移動數(shù)據(jù),實現(xiàn)數(shù)據(jù)的多項選擇。
所以今天和大家分享如何用中繼器做一個高保真的穿梭框原型，本教程主要是講解兩個中繼器的聯(lián)動交互，屬于中高級教程。
1、材料準備
中繼器（內含矩形）*2；背景框*2；左箭頭*1；右箭頭*2；文本*2，如下圖所示擺放；
中繼器內的矩形需要取消邊框，然后設置鼠標移入時填充顏色為灰色，選中時填充顏色為藍色，這樣會有更好的交互感。
背景框置于底層，調整合適的大小和位置即可。
左邊的為未選項中繼器1，在中繼器表格內填寫對應選項文字；然后復制到右面，為已選項中繼器2，由于已選項默認為0，所以需要刪除中繼器所有行，默認空值即可。
中繼器1和2均需取消隔離選項組和隔離單選按鈕組效果，兩個中繼器內的矩形需要設置單選組。
文本元件命名為邏輯1和邏輯2，默認為空且隱藏，后續(xù)用于邏輯交互
2、交互設置
中繼器1每項載入時：
設置中繼器1內矩形文字為列表Column0的值，這個交互是中繼器默認設置的。
中繼器1內矩形鼠標單擊時：
選中當前元件：因為之前我們設置了選中的顏色變藍，所以這樣做以后，就可以知道選中了那一項，而且因為設置了單選組，所以也不會同時選中多個。
設置邏輯1的文本為列表Column0的值：這里其實就是把選中的值記錄下來，方便后面左右箭頭穿梭的操作
中繼器2每項加載時及內部矩形鼠標單擊時：
交互和中繼器1一致，不過需要注意的是，中繼器2里面設置的文本是邏輯2的文本。
右箭頭鼠標單擊時：
這里需要判斷邏輯1的文字是否為空，如果為空就是還沒選中，就不發(fā)生交互，如果不為空，就需要做一個增加行和刪除行的交互。
增加行：在中繼器2里增加行，增加的值為邏輯1文本值
刪除行：刪除中繼器1里的和邏輯1文本值相同的行
完成上述兩個交互之后，我們還需要清空邏輯1的文本，因為如果不清空，我們點右箭頭就可以無限增加同一個選項，所以這里需要清空邏輯1的文本值。
左箭頭鼠標單擊時：
左箭頭和右箭頭的交互其實是一個道理的，首先需要判斷邏輯2的文本是否為空，如果為空就是還沒選中，就不發(fā)生交互，如果不為空，就需要做一個增加行和刪除行的交互，不過這里和中繼器1的交互是反過來的
增加行：在中繼器1里增加行，增加的值為邏輯2文本值
刪除行：刪除中繼器2里的和邏輯2文本值相同的行
設置邏輯2的文本值為空值
那這樣一個實用的穿梭框原型就制作完成了。
完成之后，以后我們需要使用的話，只需要填寫在左邊中繼器1的表格里填寫選項文字即可，方便使用，小提示，如果選項多的話可以在excel表格復制粘貼到中繼器表格里哦
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。