中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

一、材料準(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)填寫(xiě)對(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ù)用于邏輯交互。

二、交互設(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í)就是把選中的值記錄下來(lái)，方便后面左右箭頭穿梭的操作。

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

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

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

完成上述兩個(gè)交互之后，我們還需要清空邏輯1的文本，因?yàn)槿绻磺蹇?，我們點(diǎn)右箭頭就可以無(wú)限增加同一個(gè)選項(xiàng)，所以這里需要清空邏輯1的文本值。

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

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

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

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

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

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