Axure设计之带分页的穿梭框原型

穿梭框（Transfer）是一种常见且实用的交互组件，广泛应用于需要批量选择或分配数据的场景。

一、应用场景

其典型应用场景包括：

1. 权限管理系统：批量分配用户角色或系统权限
2. 数据筛选工具：在大数据集中选择特定维度的字段
3. 资源分配界面：如服务器分配、任务指派等
4. 表单配置工具：动态选择表单字段或组件
5. 多条件筛选器：组合多个筛选条件生成查询方案

传统穿梭框在处理大量数据时存在明显局限：当选项数量超过单屏显示容量时，用户需要反复滚动查找目标项，导致操作效率低下。本文将介绍一种结合分页功能的增强型穿梭框实现方案，通过动态面板与中继器的协同工作，既保留了穿梭框的核心交互逻辑，又解决了大数据量下的操作痛点。

二、架构分析

1. 组件结构分解

本方案采用三层嵌套结构实现：

动态面板（主容器）
├─ 中继器1（待选列表）
│  ├─ 复选框（选择状态）
│  ├─ 文本标签（选项内容）
│  └─ 交互事件（选中/取消选中）
├─ 中继器2（已选列表）
│  └─ 相同结构（保持样式一致）
├─ 按钮组（右移/左移/全选/清空）
└─ 分页控制区├─ 页码导航├─ 上一页/下一页按钮└─ 总页数显示

2. 关键交互原理

• 数据同步机制：通过中继器的"添加行"和"删除行"操作实现数据迁移
• 分页计算逻辑：总页数 = ceil(总数据量 / 每页显示数)
• 动态面板移动：根据当前页码计算垂直偏移量（偏移值 = -(当前页码-1)*单页高度）
• 状态保持：使用全局变量记录选中状态，避免分页切换导致选择丢失

三、实现步骤

1. 准备阶段：中继器数据配置

1. 创建两个中继器（unselectedRepeater和selectedRepeater）
2. 设置相同的数据结构（建议包含ID、名称、是否选中等字段）
3. 为中继器添加交互样式：
   • 鼠标悬停高亮
   • 选中状态背景色
   • 禁用状态样式

2. 核心交互实现：数据迁移

右移按钮交互设置：

单击时：
1. 遍历`unselectedRepeater`中选中的行
2. 对每行执行：- 在`selectedRepeater`中添加相同数据的新行- 从`unselectedRepeater`中删除该行
3. 更新分页状态（重新计算总页数）
4. 触发分页器刷新

左移按钮交互设置：

逻辑与右移对称，注意保持选中状态同步。

3. 分页功能实现

动态面板分页控制：

1. 计算单页高度（建议30px/行 × 显示行数）
2. 设置动态面板的"滚动条"属性为"从不显示"
3. 添加"载入时"交互：

   设置面板状态：
   位置：垂直偏移 = -(当前页码-1)*单页高度
   动画：无/缓动（根据需求）
   

分页器交互：

1. 页码按钮点击事件：

   设置全局变量"currentPage" = 目标页码
   触发动态面板的"载入时"交互
   

2. 上一页/下一页按钮：

   设置条件：
   当currentPage > 1时启用上一页
   当currentPage < 总页数时启用下一页
   

4. 状态保持优化

1. 使用全局变量selectedItems存储所有选中项的ID
2. 在中继器"项加载时"添加交互：

   如果当前项ID在selectedItems中：设置选中状态为true
   

3. 在数据迁移时同步更新selectedItems

四、扩展建议

1. 搜索过滤：添加搜索框，配合中继器的"筛选"功能实现动态数据过滤
2. 全选/反选：在表头添加复选框，通过遍历中继器所有行实现批量操作
3. 拖拽排序：使用Axure的拖拽交互，配合中继器的行序号字段实现已选项排序
4. 数据验证：添加空选择提示、最大选择数限制等业务规则

  — — 往期推荐 — —

Axure设计的“广东省网络信息化大数据平台”数据可视化大屏-CSDN博客

EQL UI元件库：Axure设计师的高效利器-CSDN博客

Axure大屏可视化模板：赋能多领域，开启数据展示新篇章_axre-CSDN博客

2小时完成1天工作量？有了这款Axure移动端元件库，设计如此简单-CSDN博客

CRM企业客户关系管理系统产品原型方案-CSDN博客