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

分級(jí)下拉選擇器，是原型設(shè)計(jì)里常用的原件，本文以省市級(jí)行政區(qū)選擇器為案例，分析如何用中繼器制作一個(gè)二級(jí)下拉選擇器，一起來(lái)學(xué)習(xí)一下吧。

分級(jí)下拉選擇器是原型設(shè)計(jì)里常用的元件，今天作者就教大家如何用中繼器制作一個(gè)二級(jí)下拉選擇器，本教程以省市級(jí)行政區(qū)選擇器為案例，制作完成后應(yīng)具備以下效果：

1. 下拉效果：點(diǎn)擊選擇地區(qū)顯示選擇器，點(diǎn)擊頁(yè)面空白地方可收起選擇器
2. 選擇效果：選擇省級(jí)行政區(qū)后，自動(dòng)顯示改一級(jí)選項(xiàng)下的二級(jí)選項(xiàng)，可以選擇對(duì)應(yīng)的市級(jí)行政區(qū)
3. 回顯效果：選擇一二級(jí)選項(xiàng)后，選擇的內(nèi)容會(huì)自動(dòng)回顯
4. 中繼器效果：具體選項(xiàng)可以在中繼器表格里維護(hù)，填寫(xiě)后自動(dòng)生成交互效果

原型地址：https://5tad3q.axshare.com/#g=1

一、材料準(zhǔn)備和原型制作

1. 一級(jí)選擇器的制作

我們主要用中繼器來(lái)做選擇器，中繼器里面的矩形我們?cè)O(shè)置選中樣式和默認(rèn)樣式，選中樣式是鼠標(biāo)移入變色的樣式，這里不用懸停樣式的原因是因?yàn)樵谥欣^器中后續(xù)設(shè)計(jì)更新行的交互，如果用移入樣式會(huì)出現(xiàn)bug；禁用樣式是點(diǎn)擊選擇該選項(xiàng)后的樣式。取消邊框線，增加選中樣式為藍(lán)色文字，調(diào)整一下尺寸。

在矩形上方我們放置一個(gè)熱區(qū)，尺寸和矩形一致，因?yàn)榫匦谓昧司蜔o(wú)法點(diǎn)擊，所以我們只需要矩形做變色效果，后續(xù)交互寫(xiě)在熱區(qū)上就可以避免無(wú)法再次點(diǎn)擊的情況

中繼器按網(wǎng)格排布。中繼器表格里兩列內(nèi)容：

1. Column1：里面填寫(xiě)一級(jí)選項(xiàng)，例如廣東省、陜西省……
2. true：默認(rèn)為空即可，后續(xù)用來(lái)做選中的交互

2. 二級(jí)選擇器的制作

制作完一級(jí)選擇器后，我們將整個(gè)中繼器轉(zhuǎn)為動(dòng)態(tài)面板，復(fù)制這個(gè)面板狀態(tài)，在新的面板狀態(tài)里面的中繼器就是時(shí)二級(jí)選擇器，在中繼器表格中增加一列：

Column2：里面填寫(xiě)二級(jí)選項(xiàng)，例如廣州市、深證市；這里要和前面Column1對(duì)應(yīng)，Column1就是該二級(jí)選項(xiàng)的一級(jí)選項(xiàng)，例如二級(jí)選項(xiàng)是廣州市，Column1就應(yīng)該填寫(xiě)廣東省。

二級(jí)選項(xiàng)因?yàn)樵诎咐幸呀?jīng)是最后一項(xiàng)了，禁用后不會(huì)影響后續(xù)的交互，所以這里可以不需要熱區(qū)遮擋矩形，后續(xù)的交互也可以直接寫(xiě)在矩形里。

3. 標(biāo)簽文字的制作

標(biāo)簽文字就是可以通過(guò)點(diǎn)擊切換的文字，例如選擇廣東省廣州市后，點(diǎn)擊省份行政區(qū)，就可以重新回到一級(jí)選擇器重新選擇省份。

那我們用兩個(gè)文本標(biāo)簽來(lái)制作即可，這里我們?cè)黾舆x中樣式為顯示下邊線為藍(lán)色。一級(jí)選項(xiàng)文字默認(rèn)選中，二級(jí)選項(xiàng)文字默認(rèn)禁用，因?yàn)橐婚_(kāi)始沒(méi)有選一級(jí)選項(xiàng)時(shí)，是看不到二級(jí)選項(xiàng)的。

最后把兩個(gè)標(biāo)簽文字設(shè)置為單選組。

4. 其他材料

包括矩形框，用于點(diǎn)擊顯示選擇器、填寫(xiě)默認(rèn)文字和回顯已選擇的文字，我們可以增加懸停、選中的樣式讓他更加美觀；

上下箭頭——默認(rèn)顯示下箭頭，隱藏上箭頭；

把上下箭頭、和矩形框組合在一起。

最后還需要一個(gè)背景矩形，用矩形增加陰影即可，將背景矩形和上面1、2、3的元件組合在一起，默認(rèn)隱藏。如下圖所示擺放：

二、交互制作

1. 回顯框組合的交互事件

鼠標(biāo)單擊回顯框組合時(shí)，我們用顯示的交互，將下面選擇框組合顯示出來(lái)，這里主要我們要選擇燈箱效果，這樣點(diǎn)擊空白的地方才可以收起燈箱，燈箱顏色可以自由設(shè)置，一樣是黑色，50%透明度。

2. 選擇器組合的交互事件

選擇器組合顯示時(shí)，我們用顯示隱藏的交互，顯示上箭頭，隱藏下箭頭；選擇器組合隱藏時(shí)，我們隱藏上箭頭，顯示下箭頭。

3. 一級(jí)選擇器交互事件

中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互設(shè)置中繼器內(nèi)矩形的文字值為中繼器表格內(nèi)Column1列對(duì)應(yīng)的文字。

如果true列的值等于1，我們就禁用當(dāng)前行中繼器內(nèi)矩形，前面加了一個(gè)禁用的交互樣式，這樣就由一個(gè)選擇變色的效果：

鼠標(biāo)移入矩形上方的熱區(qū)時(shí)，我們用選中的交互，將矩形設(shè)置為真；鼠標(biāo)移出矩形上方的熱區(qū)時(shí)，我們用選中的交互，將矩形設(shè)置為假。結(jié)合前面設(shè)置的選中樣式，就會(huì)有一個(gè)移入變色的效果。

鼠標(biāo)單擊矩形上方的熱區(qū)時(shí)，我們首先要用更新行的交互，將當(dāng)前行true列的值更新為1，結(jié)合上面的交互，相當(dāng)于該元件會(huì)禁用變色。

這里我們還需要考慮到之前是否有選項(xiàng)已經(jīng)被選中變色了，所以我們用要做一個(gè)重置，簡(jiǎn)單來(lái)說(shuō)就是把true列所有的值先變成0，然后在更新當(dāng)前行。所以我們要先用標(biāo)記行的事件，標(biāo)記所有行，然后用更新行的交互，更新已標(biāo)記的行，將true列的值更新為0。

這里我們要考慮到，點(diǎn)擊了一級(jí)選項(xiàng)，如果二級(jí)選項(xiàng)之前有選擇過(guò)選項(xiàng)，也是應(yīng)該被重置，所以我們用同樣的方式將2級(jí)選擇器里面的中繼器也要更新所有行true列的值為0。

1級(jí)選項(xiàng)器選擇之后，我們就用啟動(dòng)的交互，將前面禁用的市級(jí)行政區(qū)的文字啟用，這樣就可以點(diǎn)擊了。

在點(diǎn)擊之前，我們還要用篩選的事件，因?yàn)楝F(xiàn)在二級(jí)選擇器里面的內(nèi)容是全部選項(xiàng)，我們要篩選出該一級(jí)選項(xiàng)對(duì)應(yīng)的二級(jí)選項(xiàng)，所以用篩選事件，篩選的條件就是當(dāng)前中繼器表格當(dāng)前行的Column1列的文字值等于二級(jí)選擇器里中繼器表格中Column1的文字值。

選擇之后，我們還要將文本回顯到回顯框里，我們用設(shè)置文本的交互，將中繼器表格中當(dāng)前行Column1的值設(shè)置到回顯框里即可。

最后我們觸發(fā)二級(jí)標(biāo)簽文字（市級(jí)行政區(qū)）鼠標(biāo)單擊時(shí)的交互。

4. 二級(jí)標(biāo)簽文字的交互事件

二級(jí)標(biāo)簽文字鼠標(biāo)單擊時(shí)，首先用選擇的事件，將當(dāng)前元件設(shè)置為真，結(jié)合前面的選中樣式，改文本就會(huì)顯示下邊線。

然后我們用設(shè)置面板狀態(tài)的交互，將選擇器的動(dòng)態(tài)面板設(shè)置到2級(jí)選項(xiàng)的面板，這樣我們就可以繼續(xù)選擇二級(jí)的選項(xiàng)。

最后，我們?nèi)绻枰鲆粋€(gè)背景矩形和動(dòng)態(tài)面板自適應(yīng)尺寸的大小，就是隨著選項(xiàng)多少自動(dòng)改變尺寸。我們用設(shè)置尺寸的交互，寬是還是原來(lái)的寬度，高度我們?cè)O(shè)置為二級(jí)選項(xiàng)中繼器的高，背景矩形還要額外留出一點(diǎn)空隙。

5. 二級(jí)選擇器交互事件

二級(jí)中繼器每項(xiàng)加載時(shí)，這里和前面一級(jí)中繼器的交互基本一樣，唯一不同的點(diǎn)是一級(jí)中繼器設(shè)置文本是按Column1列的值設(shè)置，這里改成按Column2列的值來(lái)設(shè)置。

同樣鼠標(biāo)移入矩形時(shí)，我們用選中的交互，將矩形設(shè)置為真；鼠標(biāo)移出矩形時(shí)，我們用選中的交互，將矩形設(shè)置為假。結(jié)合前面設(shè)置的選中樣式，就會(huì)有一個(gè)移入變色的效果。這里和一級(jí)中繼器里面的是一樣的。

鼠標(biāo)單擊矩形時(shí)，同樣我們首先要用更新行的交互，將當(dāng)前行true列的值更新為1，結(jié)合上面的交互，相當(dāng)于該元件會(huì)禁用變色。這里我們同樣還需要考慮到之前是否有選項(xiàng)已經(jīng)被選中變色了，所以我們用要做一個(gè)重置，簡(jiǎn)單來(lái)說(shuō)就是把true列所有的值先變成0，然后在更新當(dāng)前行。

所以我們要先用標(biāo)記行的事件，標(biāo)記所有行，然后用更新行的交互，更新已標(biāo)記的行，將true列的值更新為0。

選擇之后，我們還要將文本回顯到回顯框里，我們用設(shè)置文本的交互，將中繼器表格中當(dāng)前行Column1和Column2的值設(shè)置到回顯框里即可。

6. 一級(jí)標(biāo)簽文字的交互事件

如果我們選擇省份后發(fā)現(xiàn)選擇錯(cuò)了，那么我們可以店家一級(jí)標(biāo)簽的文字，重新回到一級(jí)選擇器的界面選擇。

所以鼠標(biāo)單擊一級(jí)標(biāo)簽文字時(shí)，首先用選擇的事件，將當(dāng)前元件設(shè)置為真，結(jié)合前面的選中樣式，改文本就會(huì)顯示下邊線。

然后我們用設(shè)置面板狀態(tài)的交互，將選擇器的動(dòng)態(tài)面板設(shè)置到1級(jí)選項(xiàng)的面板，這樣我們就可以繼續(xù)選擇1級(jí)的選項(xiàng)。

最后，我們?nèi)绻枰鲆粋€(gè)背景矩形和動(dòng)態(tài)面板自適應(yīng)尺寸的大小，就是隨著選項(xiàng)多少自動(dòng)改變尺寸。我們用設(shè)置尺寸的交互，寬是還是原來(lái)的寬度，高度我們?cè)O(shè)置為1級(jí)選項(xiàng)中繼器的高，背景矩形還要額外留出一點(diǎn)空隙。

這里和扇面二級(jí)文字的交互基本一直，只是選擇的對(duì)象不同：

這樣我們就完成了二級(jí)下拉選擇器原型模板的制作了，下次使用時(shí)，只需要修改中繼器表格里的選項(xiàng)信息，即可自動(dòng)生成交互效果，是不是很方便呢？

那以上就是分級(jí)下拉選擇器的全部?jī)?nèi)容了，感謝您的閱讀，我們下期見(jiàn)~~~