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博客