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

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

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

第一步：頁面布局

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

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

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

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

第四步：進入候選中繼器刪除其默認矩形框。

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

默認情況下選項是未選中狀態(tài)，因此將已選中標識和未選中標識布局在一起且將已選中標識隱藏起來。

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

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

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

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

第五步：標記候選中繼器中已選的選項

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

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

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

此項操作在主頁面右向箭頭，為其添加鼠標單擊時交互操作：將已標記行從候選中繼器中刪除。

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

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

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

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

第八步：在主頁面，為向右箭頭新增一個鼠標單擊時的交互，為已選中繼器添加一行，詳細操作如下：

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

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

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

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

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

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