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

編輯導(dǎo)語：穿梭框在網(wǎng)頁端表單等處用到的較多，那么如何用中繼器做一個(gè)簡(jiǎn)單的穿梭框呢？本文作者為我們做出了詳細(xì)的解答。

穿梭框的布局是兩個(gè)區(qū)域：候選區(qū)和已選區(qū)，在候選區(qū)選中后單擊右向箭頭按鈕，候選區(qū)中該元素刪除、已選區(qū)中增加該元素。

使用中繼器做穿梭框，避免了一次次在原型中添加、修改、刪除的重復(fù)操作，只需要在中繼器數(shù)據(jù)中做簡(jiǎn)單編輯即可。

第一步：頁面布局

首先拖拽兩個(gè)動(dòng)態(tài)面板，從左到右分別命名為候選區(qū)和已選區(qū)，添加一個(gè)右向箭頭，布局如圖所示。

第二步：進(jìn)入候選區(qū)動(dòng)態(tài)面板，為其默認(rèn)狀態(tài)添加一個(gè)中繼器，命名為候選中繼器（注：此時(shí)操作在動(dòng)態(tài)面板狀態(tài)1里）。

第三步：為候選中繼器添加數(shù)值。

首先刪除其默認(rèn)column 0的數(shù)值，將待寫入數(shù)值在excel里生成后復(fù)制到中繼器中，候選中繼器數(shù)值如下圖所示。

第四步：進(jìn)入候選中繼器刪除其默認(rèn)矩形框。

在中繼器操作頁面拖入兩個(gè)icon作為選擇標(biāo)識(shí)，命名為未選中和已選中，用來顯示本選項(xiàng)選中狀態(tài)（本文用到的是FontAwesome 5 元件庫(kù)）。

默認(rèn)情況下選項(xiàng)是未選中狀態(tài)，因此將已選中標(biāo)識(shí)和未選中標(biāo)識(shí)布局在一起且將已選中標(biāo)識(shí)隱藏起來。

當(dāng)某選項(xiàng)處于未選中狀態(tài)時(shí)，單擊未選中標(biāo)識(shí)切換到已選中標(biāo)識(shí)，再次單擊時(shí)由已選中切換到未選中，交互設(shè)計(jì)如圖所示。

接下來，拖拽一個(gè)文本標(biāo)簽組件，命名為劇集，用來展示中繼器中數(shù)據(jù)。

為了將中繼器中數(shù)據(jù)展示在頁面中，需要將頁面的文本標(biāo)簽和中繼器數(shù)據(jù)進(jìn)行綁定，操作如下：?jiǎn)螕糁欣^器<每項(xiàng)加載時(shí)>，設(shè)置文字于->勾選劇集->單擊fx->插入變量或函數(shù)->選擇Item.option，按如上操作設(shè)置交互用例即可綁定文本標(biāo)簽和候選中繼器中的數(shù)據(jù)。

完成以上幾個(gè)步驟，預(yù)覽一下，可以看到候選中繼器的選項(xiàng)已經(jīng)展示在左側(cè)候選區(qū)里了，接下來需要做的是選中其中一個(gè)選項(xiàng)、單擊穿梭按鈕，右側(cè)增加該選項(xiàng)、左側(cè)刪除該選項(xiàng)，下面我們通過逐個(gè)步驟來分解操作。

第五步：標(biāo)記候選中繼器中已選的選項(xiàng)

具體操作如下：中繼器操作頁面，新增全局變量NewVariable，為未選中按鈕添加用例鼠標(biāo)單擊時(shí)標(biāo)記行、設(shè)置全局變量NewVariable值為Item.option。

相應(yīng)地，已選中按鈕添加用例鼠標(biāo)單擊時(shí)取消標(biāo)記行、設(shè)置全局變量NewVariable值為空。

第六步：將已標(biāo)記選項(xiàng)在候選區(qū)中刪除、選項(xiàng)值存入全局變量。

此項(xiàng)操作在主頁面右向箭頭，為其添加鼠標(biāo)單擊時(shí)交互操作：將已標(biāo)記行從候選中繼器中刪除。

經(jīng)過這樣的操作，就實(shí)現(xiàn)了單擊向右箭頭在左側(cè)候選區(qū)中刪除已選項(xiàng)的操作，那么如何將已選項(xiàng)的值傳到右側(cè)已選區(qū)域呢？

以剛建的全局變量為基礎(chǔ)，這個(gè)操作是很容易實(shí)現(xiàn)的，那么首先來搭建已選區(qū)域的組件。

第七步：點(diǎn)擊進(jìn)入已選區(qū)動(dòng)態(tài)面板，拖拽一個(gè)中繼器，刪除其默認(rèn)矩形框和默認(rèn)列column0，為其拖拽如圖所示的組件，用來展示已選的選項(xiàng)，矩形命名為已選；中繼器列名命名為chosen。

為了將候選區(qū)域中選擇的內(nèi)容顯示在已選區(qū)域，需要經(jīng)過兩個(gè)步驟，分別是已選中繼器中添加數(shù)據(jù)和已選中繼器中數(shù)據(jù)的展示。

第八步：在主頁面，為向右箭頭新增一個(gè)鼠標(biāo)單擊時(shí)的交互，為已選中繼器添加一行，詳細(xì)操作如下：

第九步：將已選中繼器中數(shù)據(jù)在頁面中顯示出來。

在已選中繼器操作頁面，添加<每項(xiàng)加載時(shí)>交互用例，設(shè)置矩形<已選>為中繼器中第一列chosen的數(shù)值。

按照這樣的步驟，通過中繼器實(shí)現(xiàn)的穿梭框就成功啦！

當(dāng)然，這個(gè)穿梭框是比較簡(jiǎn)陋的，沒有設(shè)置太多的交互效果，也不可以實(shí)現(xiàn)一次性多數(shù)據(jù)的穿梭，僅僅使用中繼器做了個(gè)基礎(chǔ)穿梭框，更復(fù)雜的功能大家繼續(xù)摸索吧！

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

題圖來自 Pexels，基于 CC0 協(xié)議