列表框左右雙向選擇效果在互聯(lián)網(wǎng)平臺中應用非常多，從左側(cè)的待選項中選中選項移入右側(cè)，從右側(cè)的已選項中取消選項移入左側(cè)。作者將通過這篇案列分享，教大家使用Axure制作實現(xiàn)“雙向列表帶計數(shù)選擇”。

演示址：http://www.pmgod.cn/demo/%E5%8F%8C%E5%90%91%E5%88%97%E8%A1%A8%E5%B8%A6%E8%AE%A1%E6%95%B0%E9%80%89%E6%8B%A9.html

實現(xiàn)效果

1. 雙向列表均為單項選擇，不支持多選或全選；
2. 移入選項、點擊選項時分別有文字顏色或背景色的變化，突出選項；
3. 如果左側(cè)選項沒有選中，點擊向右選擇時，提示“請從待選城市選擇數(shù)據(jù)項！”；
4. 如果右側(cè)選項沒有選中，點擊向左選擇時，提示“請從已選城市選擇數(shù)據(jù)項！”；
5. 每次選擇變動后，可選項和已選項的數(shù)據(jù)都會相應變化。

原理分析

1. 提供左右兩個列表框，可以互相選擇相應選項；
2. 左側(cè)為待選項的容器，用來顯示可供選擇的列表項；
3. 右側(cè)為已選項的容器，用來顯示已經(jīng)選擇的列表項；
4. 兩個列表框之間的選項通過兩個按鈕來實現(xiàn)數(shù)據(jù)交互；
5. 利用Axure的中繼器實現(xiàn)列表框的容器功能。

元件準備

1. 待選城市文本標簽，用于顯示待選城市的計數(shù)。
2. 待選項背景框（left_bg），放在待選項底部。
3. 待選項動態(tài)面板（left），用來存放可供選擇的列表項：left面板中包含一個動態(tài)面板，放置中繼器left；中繼器left中用來存儲可供選擇的列表項。
4. 選項矩形（left_sl），觸發(fā)左側(cè)待選項移入右側(cè)已選項。
5. 選項矩形（right_sl），觸發(fā)右側(cè)已選項移入左側(cè)待選項。
6. 已選城市文本標簽，用于顯示已選城市的計數(shù)。
7. 已選項背景框（right_bg），放在已選項底部。
8. 已選項動態(tài)面板（right），用來存放已經(jīng)選擇的列表項：right面板中包含一個動態(tài)面板，放置中繼器right；中繼器right用來存儲已經(jīng)選擇的列表項。
9. 操作提示組合元件，用于沒有選擇選項時的錯誤。
10. 案例背景，放在底部，可有可無。

隱藏提示文件，重新布局元件后效果如下：

實現(xiàn)步驟

（1）準備左側(cè)待選項列表數(shù)據(jù)

拖入一個中繼器left，給中繼器的默認Column0列添加21條數(shù)據(jù)，對應顯示廣東省21個地市。

將中繼器的數(shù)據(jù)通過每項加載時賦值給矩形，矩形顯示的數(shù)據(jù)就是待選項源數(shù)據(jù)

將中繼器轉(zhuǎn)換為動態(tài)面板sleft，動態(tài)面板的大小為218px*200px，設(shè)置動態(tài)面板的滾動條屬性為“自動顯示垂直滾動條”。

實用小技巧：將可滾動的動態(tài)面板sleft轉(zhuǎn)換為動態(tài)面板left，動態(tài)面板的大小為200px*200px，設(shè)置動態(tài)面板的滾動條屬性為“無”，從而可以實現(xiàn)滾動且隱藏滾動條的效果。

在動態(tài)面板left底部放一個帶邊框的矩形背景，大小為202px*202px，在矩形背景的上面部分放待選城市文本標簽，用于顯示待選城市的計數(shù)。

最終左側(cè)待選項列表元件數(shù)據(jù)顯示如下：

（2）準備右側(cè)已選項列表數(shù)據(jù)

右側(cè)已選項列表數(shù)據(jù)的實現(xiàn)原理與左側(cè)一致，差異部分在于右側(cè)已選項數(shù)據(jù)一開始為空，最終顯示如下：

（3）設(shè)置全局變量，臨時存放選中項

設(shè)置全局變量“select_listl”，用來臨時存放左側(cè)待選項選中的數(shù)據(jù)；全局變量“select_listr”，用來臨時存放右側(cè)已選項選中的數(shù)據(jù)；全局變量的默認初始值均為空值。

（4）待選項點擊交互事件

待選項矩形框用來顯示待選項數(shù)據(jù)列表，分別設(shè)置鼠標懸停、鼠標放下、選中時的交互效果。

鼠標單擊待選項矩形框時，切換選中狀態(tài)。當待選項狀態(tài)為選中時，將全局變量”select_listl”的值設(shè)置為待選項的值，同時標記該行；當待選項狀態(tài)為取消選中時，將全局變量”select_listl”的值設(shè)置未空，同時取消標記該行。

（5）設(shè)置待選城市文本標簽事件

中繼器left的的數(shù)量值等于可選項的數(shù)據(jù)值，中繼器每項加載時，設(shè)置待選城市的文本顯示為“待選城市（可選[[Item.Repeater.dataCount]]項）”。

中繼器賦值方法如下，文本格式為“富文本”。

[[Item.Repeater.dataCount]]表示中繼器的數(shù)量值，利用富文本特性改變選項值的文本顏色。

（5）待選項點擊交互事件

已選項點擊交互事件同待選項點擊交互事件一致，此處不再重復。

（6）設(shè)置待選城市文本標簽事件

已選城市文本標簽設(shè)置與待選城市文本標簽設(shè)置一致，此處不再重復。

（7）左側(cè)向右選擇點擊事件

點擊“l(fā)eft_sl”按鈕時，需要判斷該點擊事件是否為有效點擊事件。

左側(cè)待選項有選中狀態(tài)時，全局變量“select_listl”不為空，點擊事件有效，需要將該選項選中添加到右側(cè)已選項列表中，同時刪除待選項列表中的記錄，表示選擇該選項值。特別注意：此處需要將待選項及已選項的狀態(tài)設(shè)置為“未選中”。

當左側(cè)待選項沒有選中狀態(tài)時，點擊事件無效，提示“請從待選城市選擇數(shù)據(jù)項！”。

（8）右側(cè)向左選擇點擊事件

點擊“right_sl”按鈕時，需要判斷該點擊事件是否為有效點擊事件。

右側(cè)已選項有選中狀態(tài)時，全局變量“select_listr”不為空，點擊事件有效，需要將該選項選中添加到左側(cè)待選項列表中，同時刪除已選項列表中的記錄，表示取消該選項值。

特別注意：此處需要將待選項及已選項的狀態(tài)設(shè)置為“未選中”。

當右側(cè)已選項沒有選中狀態(tài)時，點擊事件無效，提示“請從已選城市選擇數(shù)據(jù)項！”

實用小技巧：利用顯示事件的“燈箱效果”，背景色為黑色，透明度設(shè)置為20%，提示效果很漂亮。

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

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