前段时间分享过一个支持单选的穿梭器（列表框左右双向选择）案例，很多朋友觉得很赞，同时也想进一步学习并掌握支持单选、多选、全选的穿梭器交互制作。作者将通过这篇案列分享，教大家使用Axure制作实现“穿梭器：双向列表带计数选择（支持单选、多选和全选）”。

一、演示地址

穿梭器：双向列表带计数选择（支持单选、多选和全选）

二、实现效果

1. 双向列表均支持单选、多选或全选；
2. 移入选项、点击选项时分别有文字颜色或背景色的变化，突出选项；
3. 如果左侧选项没有选中，点击向右选择时，出现错误提示信息；
4. 如果右侧选项没有选中，点击向左选择时，出现错误提示信息；
5. 点击全部选择时，左侧数据全部移入右侧；点击全部取消时，右侧数据全部移入左侧；
6. 每次选择变动后，可选项和已选项的数据都会相应变化；
7. 当可选项或已选项为0时，可选项和已选项的数据也能正确显示。

三、原理分析

1. 提供左右两个列表框，两边的数据内容一致，数据是否显示的状态互斥；
2. 左边为待选项的容器，初始状态全部为1，表示全部可见；
3. 右侧为已选项的容器，初始状态全部为0，表示全部不可见；
4. 当选中左边的选项，确认执行选择时，将左边选中项状态设置为0，同时将右边对应的选项设置为1；
5. 执行完成后，左边选中的数据隐藏，右边显示左侧隐藏的数据；
6. 取消选择的方法原理相同；
7. 点击全部选择时，将左侧所有数据状态全部设置为0，同时将右边全部数据状态设置为1（不需考虑之前的数据显示状态）；
8. 执行非全选时，如果没有选择数据项，则给出错误提示即可；

注：单选穿梭器案例是采用变量赋值方法制作，由于中继器不支持同时插入多条数据，故多选案例不能用变量方法实现。

四、元件准备

1. 待选城市文本标签，用于显示待选城市的计数
2. 待选项背景框（left_bg），放在待选项底部
3. 待选项动态面板(left)，用来存放可供选择的列表项；left面板中包含一个动态面板，放置中继器left；中继器left中用来存储可供选择的列表项
4. 选项矩形（left_sl），触发左侧待选项移入右侧已选项
5. 选项矩形（right_sl），触发右侧已选项移入左侧待选项
6. 选项矩形（全部选择），触发左侧待选项全部移入右侧已选项
7. 选项矩形（全部取消），触发右侧已选项全部移入左侧待选项
8. 已选城市文本标签，用于显示已选城市的计数
9. 已选项背景框（right_bg），放在已选项底部
10. 已选项动态面板(right)，用来存放已经选择的列表项；right面板中包含一个动态面板，放置中继器right；中继器right用来存储已经选择的列表项
11. 操作提示组合元件，用于没有选择选项时的错误

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

五、实现步骤

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协议。