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