酷播亮新聞
前段時間分享過一個支持單選的穿梭器（列錶框左右雙向選擇）案例，很多朋友覺得很贊，同時也想進一步學習並掌握支持單選、多選、全選的穿梭器交互製作。 作者將通過這篇案列分享，教大家使用Axure製作實現“穿梭器：雙向列錶帶計數選擇（支持單選、多选和全選）”。
一、演示地址
二、實現效果
- 雙向列表均支持單選、多選或全選；
- 移入選項、點擊選項時分別有文字顏色或背景色的變化，突出選項；
- 如果左側選項沒有選中，點擊向右選擇時，出現錯誤提示信息；
- 如果右側選項沒有選中，點擊向左選擇時，出現錯誤提示信息；
- 點擊全部選擇時，左側數據全部移入右側；點擊全部取消時，右側數據全部移入左側；
- 每次選擇變動後，可選項和已選項的數據都會相應變化；
- 當可選項或已選項為0時，可選項和已選項的數據也能正確顯示。
三、原理分析
- 提供左右兩個列錶框，兩邊的數據內容一致，數據是否顯示的狀態互斥；
- 左邊為待選項的容器，初始狀態全部為1，表示全部可見；
- 右側為已選項的容器，初始狀態全部為0，表示全部不可見；
- 當選中左邊的選項，確認執行選擇時，將左邊選中項狀態設置為0，同時將右邊對應的選項設置為1；
- 執行完成後，左邊選中的數據隱藏，右邊顯示左側隱藏的數據；
- 取消選擇的方法原理相同；
- 點擊全部選擇時，將左側所有數據狀態全部設置為0，同時將右邊全部數據狀態設置為1（不需考慮之前的數據顯示狀態）；
- 執行非全選時，如果沒有選擇數據項，則給出錯誤提示即可；
注：單選穿梭器案例是採用變量賦值方法製作，由於中繼器不支持同時插入多條數據，故多選案例不能用變量方法實現。
四、元件準備
- 待選城市文本標籤，用於顯示待選城市的計數
- 待選項背景框（left_bg），放在待選項底部
- 待選項動態面板(left)，用來存放可供選擇的列表項；left面板中包含一個動態面板，放置中繼器left；中繼器left中用來存儲可供選擇的列表項
- 選項矩形（left_sl），觸發左側待選項移入右側已選項
- 選項矩形（right_sl），觸發右側已選項移入左側待選項
- 選項矩形（全部選擇），觸發左側待選項全部移入右側已選項
- 選項矩形（全部取消），觸發右側已選項全部移入左側待選項
- 已選城市文本標籤，用於顯示已選城市的計數
- 已選項背景框（right_bg），放在已選項底部
- 已選項動態面板(right)，用來存放已經選擇的列表項；right面板中包含一個動態面板，放置中繼器right；中繼器right用來存儲已經選擇的列表項
- 操作提示組合元件，用於沒有選擇選項時的錯誤
隱藏提示文件，重新佈局元件後效果如下：
五、實現步驟
1. 準備左側待選項列表數據
拖入一個中繼器left，中繼器存儲city、state兩列數據，city列添加21條數據，對應顯示廣東省21個地市，state列全部為1（此處1表示可見）：
將中繼器的數據通過每項加載時賦值給矩形，矩形顯示的數據就是待選項源數據：
將中繼器轉換為動態面板sleft，動態面板的大小為218px*200px。 設置動態面板的滾動條屬性為“自動顯示垂直滾動條”：
實用小技巧：將可滾動的動態面板sleft轉換為動態面板left，動態面板的大小為200px*200px。 設置動態面板的滾動條屬性為“無”，從而可以實現滾動且隱藏滾動條的效果。
在動態面板left底部放一個帶邊框的矩形背景，大小為202px*202px，在矩形背景的上面部分放待選城市文本標籤，用於顯示待選城市的計數。 最終左側待選項列表元件數據顯示如下：
2. 準備右側已選項列表數據
拖入一個中繼器right，中繼器存儲city、state兩列數據，city列添加21條數據，對應顯示廣東省21個地市，state列全部為0（此處0表示不可見）
右側其餘的實現原理與左側一致，最終右側已選項列表元件數據顯示如下：
3. 設置全局變量，臨時存放選中項
設置全局變量“select_listl”，用來臨時存放左側待選項選中的數據；全局變量“select_listr”，用來臨時存放右側已選項選中的數據；全局變量的默認初始值均為空值。
4. 待選項點擊交互事件
待選項矩形框用來顯示待選項數據列表，分別設置鼠標懸停、鼠標放下、選中時的交互效果。
鼠標單擊待選項矩形框時，切換選中狀態。 當待選項狀態為選中時，將全局變量”select_listl”的值設置為“當前值+1”，同時標記該行；當待選項狀態為取消選中時，將全局變量”select_listl”的值設置為“ 當前值-1”
5. 設置待選城市文本標籤事件
中繼器left的的數量值等於可選項的數據值，中繼器載入時，需要添加篩選，只顯示state為1 的數據。 每項加載時，設置待選城市的文本顯示為“待選城市（可選[[Item.Repeater.dataCount]]項）”
中繼器賦值方法如下，文本格式為“富文本”
[[Item.Repeater.dataCount]]表示中繼器的數量值，利用富文本特性改變選項值的文本顏色：
6. 已選項點擊交互事件
已選項點擊交互事件同待選項點擊交互事件一致，此處不再重複。
7. 設置已選城市文本標籤事件
已選城市文本標籤設置與待選城市文本標籤設置一致，此處不再重複。
8. 左側向右選擇點擊事件
點擊“>>”按鈕時，需要判斷該點擊事件是否為有效點擊事件。
左側待選項有選中狀態時，全局變量“select_listl”不為空，點擊事件有效，需要將左側選中數據的狀態更新為0，同時將右側相同數據狀態更新為1。 特別注意：此處需要將待選項及已選項的選中標誌全部取消
當左側待選項沒有選中狀態時，點擊事件無效，提示“請從待選城市選擇數據項！”
9. 右側向左選擇點擊事件
點擊“
右側已選項有選中狀態時，全局變量“select_listr”不為空，點擊事件有效，需要將右側選中數據的狀態更新為0，同時將左側相同數據狀態更新為1。 特別注意：此處需要將待選項及已選項的選中標誌全部取消
當右側已選項沒有選中狀態時，點擊事件無效，提示“請從已選城市選擇數據項！”。
10. 全部選擇點擊事件
點擊“全部選擇”按鈕時，不管左側是否選中，也不需要考慮左側還有多少待選項。 直接將左側所有數據狀態改為0，將右側所有數據狀態改為1，同時取消所有數據選擇狀態。
11. 全部取消點擊事件
點擊“全部取消”按鈕時，不管右側是否選中，也不需要考慮右側還有多少已選項。 直接將右側所有數據狀態改為0，將左側所有數據狀態改為1，同時取消所有數據選擇狀態。
實用小技巧：利用顯示事件的“燈箱效果”，背景色為黑色，透明度設置為20%。 提示效果很漂亮。
本案例已完成，點擊查看上一篇案例《 Axure教程：省市縣三級聯動選擇（全國省市區數據） 》
本文由 @十月大神 原創發佈於人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議。