所需原件:
- 中繼器
- 文本框
聯(lián)級(jí)框的制作實(shí)際上是中繼器篩選能力的一個(gè)進(jìn)階用法,今天我們就來(lái)學(xué)習(xí)一下怎么制作常用的聯(lián)級(jí)框吧!這次的交互會(huì)比較繁瑣,大家一定要耐心看完哦!
一、文本框
如上圖所示,拖入矩形,模擬輸入框,并填入文字“請(qǐng)選擇”,設(shè)置好【懸!、【選中】、【獲取焦點(diǎn)】的交互樣式;文本標(biāo)簽作為下拉聯(lián)級(jí)框的標(biāo)題,按上圖布局即可得到文本框模型;
二、聯(lián)級(jí)框
如上圖,拖入三個(gè)中繼器,分別命名為【L1】、【L2】、【L3】作為一級(jí)、二級(jí)、三級(jí)的聯(lián)級(jí)列表,并做好數(shù)據(jù)填充和【每項(xiàng)加載】的設(shè)置,分別將【Item.L1】、【Item.L2】、【Item.L3】賦值給到【L1】、【L2】、【L3】;
在填充數(shù)據(jù)這一步,建議大家可以像上圖一樣,先用 Excel 做好數(shù)據(jù)備份,以便后續(xù)修改使用,且中繼器數(shù)據(jù)是支持直接通過(guò) Excel 復(fù)制黏貼到中繼器的數(shù)據(jù)表中的;
三、交互設(shè)置
選中【L1】的中繼器,雙擊選中【L1】文本標(biāo)簽,添加【單擊時(shí)】設(shè)置切換選中效果的交互動(dòng)作;
為【選中時(shí)】添加設(shè)置文本,將【Item.L1】賦值給到【sel_L1】的文本標(biāo)簽;
同時(shí),向目標(biāo)對(duì)象【L2】中繼器添加篩選,規(guī)則為 [[Item.L1==TargetItem.L1]]
,注意勾選“移除其他篩選”
并且顯示【L2】中繼器,如上圖設(shè)置所示;
當(dāng)【取消選中時(shí)】,將【sel_L1】設(shè)置為空值,且移除【L2】的篩選,同時(shí)隱藏【L2】;
同理可以自己嘗試一下設(shè)置【L2】的交互哦~
最后,【L3】的交互就相對(duì)簡(jiǎn)單一點(diǎn),同樣,需要設(shè)置切換選中的交互動(dòng)作,但【選中時(shí)】?jī)H需將【Item.L3】賦值給到【sel_L3】文本標(biāo)簽,且【取消選中時(shí)】將【sel_L3】設(shè)置為空值;
四、細(xì)節(jié)優(yōu)化
這個(gè)組件的小細(xì)節(jié)還是比較多的,我就不一一說(shuō)明了,我就挑幾個(gè)來(lái)說(shuō),首先是聯(lián)級(jí)框的背景,在選中【L1】時(shí),需要將背景的寬度翻倍,選中【L2】時(shí),背景再加 1.5 倍;
中繼器【L1】的文本標(biāo)簽【選中時(shí)】,除賦值給【sel_L1】外,需同步重置【sel_L2】、【sel_L3】的值;
中繼器【L1】的文本標(biāo)簽【取消選中時(shí)】,隱藏【L2】、【L3】中繼器;
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。