1. 为什么需要自定义树形菜单？

Axure RP 9自带的树形控件虽然能用，但实际项目中总会遇到各种限制。比如默认的树节点间距无法调整、图标样式固定、交互效果单一，更别说实现无限层级的数据展示了。我在给某电商平台做后台管理系统时，就遇到过产品经理要求实现"左侧菜单可折叠+自动记忆展开状态"的需求，这时候原生控件就完全不够用了。

中继器（Repeater）这个元件就像个万能容器，它能根据数据动态生成内容。我把它比作Excel表格：数据集是数据源，项目模板是展示样式，通过简单的交互设置就能实现数据绑定。最妙的是，配合递归逻辑可以实现无限层级嵌套，这正是原生树控件做不到的。

2. 搭建基础结构

2.1 创建数据骨架

首先在画布上拖入一个中继器，双击进入编辑状态。这里我们需要设计两个核心部分：

• 数据集：相当于数据库表格，我通常设置这些列：

  | menu_id | parent_id | menu_name | is_expanded | icon_class | |---------|-----------|-----------|-------------|------------| | 1 | 0 | 仪表盘 | true | icon-home | | 2 | 0 | 商品管理 | false | icon-cube | | 3 | 2 | 商品列表 | false | icon-list |

• 项目模板：用矩形+文本组合构建菜单项，记得留出缩进空间。建议添加：
  • 箭头图标（用于展开/折叠）
  • 菜单文本标签
  • 分隔线（视觉优化）

2.2 设置初始交互

在中继器的"项目加载时"事件添加以下动作：

1. 设置文本标签 =[[Item.menu_name]]
2. 设置图标样式 =[[Item.icon_class]]
3. 根据is_expanded值显示/隐藏子菜单（用动态面板实现）

实测时发现个坑：中继器默认会平铺所有项目，需要手动添加层级缩进。我的解决方案是用公式计算缩进量：

[[(Item.parent_id==0)?0:20]]px // 一级菜单不缩进，二级缩进20px

3. 实现动态交互

3.1 展开/折叠逻辑

给箭头图标添加"单击时"事件：

1. 切换当前行的is_expanded值 2. 筛选数据集：parent_id=当前menu_id 3. 对筛选结果遍历： - 如果is_expanded=true，显示子面板 - 否则隐藏子面板 4. 旋转箭头图标（视觉反馈）

这里有个性能优化点：不要直接操作数据集，而是用"更新行"动作局部刷新。我在处理300+节点的菜单时，全局刷新会导致明显卡顿。

3.2 位置自适应

当子菜单展开时，下方的兄弟节点需要自动下移。通过"移动"动作实现：

1. 获取当前菜单的Y坐标
2. 计算所有子菜单的总高度
3. 将后续菜单下移对应像素

踩坑记录：最初直接用固定数值移动，后来发现动态面板展开时有动画效果，改用"等待动画完成"事件触发移动才解决错位问题。

4. 高级功能扩展

4.1 数据动态加载

模拟异步加载效果：

1. 给父节点添加"加载中"状态
2. 用"设置文本"显示旋转的loading图标
3. 延迟500ms后更新数据集

// 伪代码示例 设置文本(当前菜单) = "加载中..." 等待500ms 添加行(中继器, 新数据) 设置文本(当前菜单) = "▼ 商品管理"

4.2 状态持久化

利用Axure全局变量保存展开状态：

1. 创建全局变量expanded_ids
2. 展开/折叠时更新变量值：

   [[expanded_ids.indexOf(Item.menu_id)<0 ? expanded_ids+','+Item.menu_id : expanded_ids.replace(','+Item.menu_id, '')]]

3. 页面加载时根据变量值初始化状态

5. 实战案例演示

最近给物流系统做的无限级菜单包含这些特性：

• 三级权限控制（通过数据集中的role字段过滤）
• 快捷键支持（Alt+数字快速定位）
• 面包屑导航联动

关键实现步骤：

1. 用中继器嵌套实现多级菜单（注意要给每级设置不同的前缀class）
2. 添加热区元件捕获快捷键
3. 通过"触发事件"联动面包屑组件

效果验证时发现个有趣现象：当菜单层级超过5级时，用户操作效率反而下降。最终通过"默认展开常用节点+自动折叠闲置节点"的智能策略解决了这个问题。

6. 避坑指南

1. 性能问题：当节点超过200个时，建议：

   • 启用分页加载（每页50条）
   • 用"标记行"代替直接操作数据集
   • 避免在交互中使用复杂公式

2. 移动端适配：

   • 触控区域至少44×44px
   • 将hover效果改为click触发
   • 添加滑动展开手势（通过touch事件实现）

3. 视觉一致性：

   • 使用CSS样式复用（右键菜单项→创建样式）
   • 给所有交互添加200ms过渡动画
   • 用SVG图标代替字体图标（避免缩放模糊）

这个方案已经在我们团队落地了8个项目，最复杂的案例实现了7级菜单+实时搜索过滤。建议初次尝试时先从3级菜单开始练手，逐步添加功能模块。