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

編輯導(dǎo)語：本篇文章里，作者利用中繼器為我們展示了聯(lián)級框的制作流程，讓我們一起來看一下。

聯(lián)級框：

原型展示：https://bo2g12.axshare.com

所需原件：

1. 中繼器
2. 文本框

聯(lián)級框的制作實際上是中繼器篩選能力的一個進階用法，今天我們就來學(xué)習(xí)一下怎么制作常用的聯(lián)級框吧！這次的交互會比較繁瑣，大家一定要耐心看完哦！

一、文本框

如上圖所示，拖入矩形，模擬輸入框，并填入文字“請選擇”，設(shè)置好【懸停】、【選中】、【獲取焦點】的交互樣式；文本標(biāo)簽作為下拉聯(lián)級框的標(biāo)題，按上圖布局即可得到文本框模型。

二、聯(lián)級框

如上圖，拖入三個中繼器，分別命名為【L1】、【L2】、【L3】作為一級、二級、三級的聯(lián)級列表，并做好數(shù)據(jù)填充和【每項加載】的設(shè)置，分別將【Item.L1】、【Item.L2】、【Item.L3】賦值給到【L1】、【L2】、【L3】。

在填充數(shù)據(jù)這一步，建議大家可以像上圖一樣，先用 Excel 做好數(shù)據(jù)備份，以便后續(xù)修改使用，且中繼器數(shù)據(jù)是支持直接通過 Excel 復(fù)制黏貼到中繼器的數(shù)據(jù)表中的。

三、交互設(shè)置

選中【L1】的中繼器，雙擊選中【L1】文本標(biāo)簽，添加【單擊時】設(shè)置切換選中效果的交互動作。

為【選中時】添加設(shè)置文本，將【Item.L1】賦值給到【sel_L1】的文本標(biāo)簽。

同時，向目標(biāo)對象【L2】中繼器添加篩選，規(guī)則為 [[Item.L1==TargetItem.L1]]，注意勾選“移除其他篩選”。

并且顯示【L2】中繼器，如上圖設(shè)置所示：

當(dāng)【取消選中時】，將【sel_L1】設(shè)置為空值，且移除【L2】的篩選，同時隱藏【L2】。

同理可以自己嘗試一下設(shè)置【L2】的交互哦~

最后，【L3】的交互就相對簡單一點，同樣，需要設(shè)置切換選中的交互動作，但【選中時】僅需將【Item.L3】賦值給到【sel_L3】文本標(biāo)簽，且【取消選中時】將【sel_L3】設(shè)置為空值。

四、細節(jié)優(yōu)化

這個組件的小細節(jié)還是比較多的，我就不一一說明了，我就挑幾個來說，首先是聯(lián)級框的背景，在選中【L1】時，需要將背景的寬度翻倍，選中【L2】時，背景再加 1.5 倍。

中繼器【L1】的文本標(biāo)簽【選中時】，除賦值給【sel_L1】外，需同步重置【sel_L2】、【sel_L3】的值。

中繼器【L1】的文本標(biāo)簽【取消選中時】，隱藏【L2】、【L3】中繼器。

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

題圖來自Unsplash, 基于CC0協(xié)議。