Axure设计之带分页的穿梭框原型
穿梭框（Transfer）是一种常见且实用的交互组件，广泛应用于需要批量选择或分配数据的场景。
一、应用场景
其典型应用场景包括：
- 权限管理系统：批量分配用户角色或系统权限
- 数据筛选工具：在大数据集中选择特定维度的字段
- 资源分配界面：如服务器分配、任务指派等
- 表单配置工具：动态选择表单字段或组件
- 多条件筛选器：组合多个筛选条件生成查询方案
传统穿梭框在处理大量数据时存在明显局限：当选项数量超过单屏显示容量时，用户需要反复滚动查找目标项，导致操作效率低下。本文将介绍一种结合分页功能的增强型穿梭框实现方案，通过动态面板与中继器的协同工作，既保留了穿梭框的核心交互逻辑，又解决了大数据量下的操作痛点。
二、架构分析
1. 组件结构分解
本方案采用三层嵌套结构实现：
动态面板（主容器）
├─ 中继器1（待选列表）
│ ├─ 复选框（选择状态）
│ ├─ 文本标签（选项内容）
│ └─ 交互事件（选中/取消选中）
├─ 中继器2（已选列表）
│ └─ 相同结构（保持样式一致）
├─ 按钮组（右移/左移/全选/清空）
└─ 分页控制区├─ 页码导航├─ 上一页/下一页按钮└─ 总页数显示
2. 关键交互原理
- 数据同步机制：通过中继器的"添加行"和"删除行"操作实现数据迁移
- 分页计算逻辑：
总页数 = ceil(总数据量 / 每页显示数) - 动态面板移动：根据当前页码计算垂直偏移量（
偏移值 = -(当前页码-1)*单页高度） - 状态保持：使用全局变量记录选中状态，避免分页切换导致选择丢失
三、实现步骤
1. 准备阶段：中继器数据配置
- 创建两个中继器（
unselectedRepeater和selectedRepeater） - 设置相同的数据结构（建议包含ID、名称、是否选中等字段）
- 为中继器添加交互样式：
- 鼠标悬停高亮
- 选中状态背景色
- 禁用状态样式
2. 核心交互实现：数据迁移
右移按钮交互设置：
单击时：
1. 遍历`unselectedRepeater`中选中的行
2. 对每行执行：- 在`selectedRepeater`中添加相同数据的新行- 从`unselectedRepeater`中删除该行
3. 更新分页状态（重新计算总页数）
4. 触发分页器刷新
左移按钮交互设置：
逻辑与右移对称，注意保持选中状态同步。
3. 分页功能实现
动态面板分页控制：
- 计算单页高度（建议30px/行 × 显示行数）
- 设置动态面板的"滚动条"属性为"从不显示"
- 添加"载入时"交互：
设置面板状态： 位置：垂直偏移 = -(当前页码-1)*单页高度 动画：无/缓动（根据需求）
分页器交互：
- 页码按钮点击事件：
设置全局变量"currentPage" = 目标页码 触发动态面板的"载入时"交互 - 上一页/下一页按钮：
设置条件： 当currentPage > 1时启用上一页 当currentPage < 总页数时启用下一页
4. 状态保持优化
- 使用全局变量
selectedItems存储所有选中项的ID - 在中继器"项加载时"添加交互：
如果当前项ID在selectedItems中：设置选中状态为true - 在数据迁移时同步更新
selectedItems
四、扩展建议
- 搜索过滤：添加搜索框，配合中继器的"筛选"功能实现动态数据过滤
- 全选/反选：在表头添加复选框，通过遍历中继器所有行实现批量操作
- 拖拽排序：使用Axure的拖拽交互，配合中继器的行序号字段实现已选项排序
- 数据验证：添加空选择提示、最大选择数限制等业务规则
— — 往期推荐 — —
Axure设计的“广东省网络信息化大数据平台”数据可视化大屏-CSDN博客
EQL UI元件库：Axure设计师的高效利器-CSDN博客
Axure大屏可视化模板：赋能多领域，开启数据展示新篇章_axre-CSDN博客
2小时完成1天工作量？有了这款Axure移动端元件库，设计如此简单-CSDN博客
CRM企业客户关系管理系统产品原型方案-CSDN博客