實現(xiàn)效果
1、雙向列表均支持單選、多選或全選；
2、移入選項、點擊選項時分別有文字顏色或背景色的變化，突出選項；
3、如果左側(cè)選項沒有選中，點擊向右選擇時，出現(xiàn)錯誤提示信息；
4、如果右側(cè)選項沒有選中，點擊向左選擇時，出現(xiàn)錯誤提示信息；
5、點擊全部選擇時，左側(cè)數(shù)據(jù)全部移入右側(cè)；點擊全部取消時，右側(cè)數(shù)據(jù)全部移入左側(cè)；
6、每次選擇變動后，可選項和已選項的數(shù)據(jù)都會相應變化；
7、當可選項或已選項為0時，可選項和已選項的數(shù)據(jù)也能正確顯示；
原理分析
1、提供左右兩個列表框，兩邊的數(shù)據(jù)內(nèi)容一致，數(shù)據(jù)是否顯示的狀態(tài)互斥；
2、左邊為待選項的容器，初始狀態(tài)全部為1，表示全部可見；
3、右側(cè)為已選項的容器，初始狀態(tài)全部為0，表示全部不可見；
4、當選中左邊的選項，確認執(zhí)行選擇時，將左邊選中項狀態(tài)設置為0，同時將右邊對應的選項設置為1；
5、執(zhí)行完成后，左邊選中的數(shù)據(jù)隱藏，右邊顯示左側(cè)隱藏的數(shù)據(jù)；
6、取消選擇的方法原理相同；
7、點擊全部選擇時，將左側(cè)所有數(shù)據(jù)狀態(tài)全部設置為0，同時將右邊全部數(shù)據(jù)狀態(tài)設置為1（不需考慮之前的數(shù)據(jù)顯示狀態(tài)）；
8、執(zhí)行非全選時，如果沒有選擇數(shù)據(jù)項，則給出錯誤提示即可；
注：單選穿梭器案例是采用變量賦值方法制作，由于中繼器不支持同時插入多條數(shù)據(jù)，故多選案例不能用變量方法實現(xiàn)
元件準備
1、待選城市文本標簽，用于顯示待選城市的計數(shù)
2、待選項背景框（left_bg），放在待選項底部
3、待選項動態(tài)面板(left)，用來存放可供選擇的列表項
3.1 left面板中包含一個動態(tài)面板，放置中繼器left
3.2 中繼器left中用來存儲可供選擇的列表項
4、選項矩形（left_sl），觸發(fā)左側(cè)待選項移入右側(cè)已選項
5、選項矩形（right_sl），觸發(fā)右側(cè)已選項移入左側(cè)待選項
6、選項矩形（全部選擇），觸發(fā)左側(cè)待選項全部移入右側(cè)已選項
7、選項矩形（全部取消），觸發(fā)右側(cè)已選項全部移入左側(cè)待選項
8、已選城市文本標簽，用于顯示已選城市的計數(shù)
9、已選項背景框（right_bg），放在已選項底部
10、已選項動態(tài)面板(right)，用來存放已經(jīng)選擇的列表項
10.1 right面板中包含一個動態(tài)面板，放置中繼器right
10.2 中繼器right用來存儲已經(jīng)選擇的列表項
11、操作提示組合元件，用于沒有選擇選項時的錯誤
隱藏提示文件，重新布局元件后效果如下：
實現(xiàn)步驟
1、準備左側(cè)待選項列表數(shù)據(jù)
拖入一個中繼器left，中繼器存儲city、state兩列數(shù)據(jù)，city列添加21條數(shù)據(jù)，對應顯示廣東省21個地市，state列全部為1（此處1表示可見）
將中繼器的數(shù)據(jù)通過每項加載時賦值給矩形，矩形顯示的數(shù)據(jù)就是待選項源數(shù)據(jù)
將中繼器轉(zhuǎn)換為動態(tài)面板sleft，動態(tài)面板的大小為218px*200px。設置動態(tài)面板的滾動條屬性為“自動顯示垂直滾動條”
實用小技巧：將可滾動的動態(tài)面板sleft轉(zhuǎn)換為動態(tài)面板left，動態(tài)面板的大小為200px*200px。設置動態(tài)面板的滾動條屬性為“無”，從而可以實現(xiàn)滾動且隱藏滾動條的效果
在動態(tài)面板left底部放一個帶邊框的矩形背景，大小為202px*202px，在矩形背景的上面部分放待選城市文本標簽，用于顯示待選城市的計數(shù)。最終左側(cè)待選項列表元件數(shù)據(jù)顯示如下：
2、準備右側(cè)已選項列表數(shù)據(jù)
拖入一個中繼器right，中繼器存儲city、state兩列數(shù)據(jù)，city列添加21條數(shù)據(jù)，對應顯示廣東省21個地市，state列全部為0（此處0表示不可見）
右側(cè)其余的實現(xiàn)原理與左側(cè)一致，最終右側(cè)已選項列表元件數(shù)據(jù)顯示如下：
3、設置全局變量，臨時存放選中項
設置全局變量“select_listl”，用來臨時存放左側(cè)待選項選中的數(shù)據(jù)；全局變量“select_listr”，用來臨時存放右側(cè)已選項選中的數(shù)據(jù)；全局變量的默認初始值均為空值。
4、待選項點擊交互事件
待選項矩形框用來顯示待選項數(shù)據(jù)列表，分別設置鼠標懸停、鼠標放下、選中時的交互效果。
鼠標單擊待選項矩形框時，切換選中狀態(tài)。當待選項狀態(tài)為選中時，將全局變量”select_listl”的值設置為“當前值 1”，同時標記該行；當待選項狀態(tài)為取消選中時，將全局變量”select_listl”的值設置為“當前值-1”
5、設置待選城市文本標簽事件
中繼器left的的數(shù)量值等于可選項的數(shù)據(jù)值，中繼器載入時，需要添加篩選，只顯示state為1 的數(shù)據(jù)。每項加載時，設置待選城市的文本顯示為“待選城市（可選[[Item.Repeater.dataCount]]項）”
中繼器賦值方法如下，文本格式為“富文本”
[[Item.Repeater.dataCount]]表示中繼器的數(shù)量值，利用富文本特性改變選項值的文本顏色
6、已選項點擊交互事件
已選項點擊交互事件同待選項點擊交互事件一致，此處不再重復
7、設置已選城市文本標簽事件
已選城市文本標簽設置與待選城市文本標簽設置一致，此處不再重復
8、左側(cè)向右選擇點擊事件
點擊“>>”按鈕時，需要判斷該點擊事件是否為有效點擊事件。
左側(cè)待選項有選中狀態(tài)時，全局變量“select_listl”不為空，點擊事件有效，需要將左側(cè)選中數(shù)據(jù)的狀態(tài)更新為0，同時將右側(cè)相同數(shù)據(jù)狀態(tài)更新為1。特別注意：此處需要將待選項及已選項的選中標志全部取消
當左側(cè)待選項沒有選中狀態(tài)時，點擊事件無效，提示“請從待選城市選擇數(shù)據(jù)項！”
9、右側(cè)向左選擇點擊事件
點擊“<<”按鈕時，需要判斷該點擊事件是否為有效點擊事件。 右側(cè)已選項有選中狀態(tài)時，全局變量“select_listr”不為空，點擊事件有效，需要將右側(cè)選中數(shù)據(jù)的狀態(tài)更新為0，同時將左側(cè)相同數(shù)據(jù)狀態(tài)更新為1。特別注意：此處需要將待選項及已選項的選中標志全部取消 當右側(cè)已選項沒有選中狀態(tài)時，點擊事件無效，提示“請從已選城市選擇數(shù)據(jù)項！”
10、全部選擇點擊事件
點擊“全部選擇”按鈕時，不管左側(cè)是否選中，也不需要考慮左側(cè)還有多少待選項。直接將左側(cè)所有數(shù)據(jù)狀態(tài)改為0，將右側(cè)所有數(shù)據(jù)狀態(tài)改為1，同時取消所有數(shù)據(jù)選擇狀態(tài)。
11、全部取消點擊事件
點擊“全部取消”按鈕時，不管右側(cè)是否選中，也不需要考慮右側(cè)還有多少已選項。直接將右側(cè)所有數(shù)據(jù)狀態(tài)改為0，將左側(cè)所有數(shù)據(jù)狀態(tài)改為1，同時取消所有數(shù)據(jù)選擇狀態(tài)。
實用小技巧：利用顯示事件的“燈箱效果”，背景色為黑色，透明度設置為20%。提示效果很漂亮。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。