uni-app实现点击展开多级菜单 uni-app递归列表展示

苏承栈

2026-09-16 • 👁 0人浏览过

uni-app中v-for递归渲染多级菜单无反应，因Vue 2不支持组件自调用，须显式声明name、注册自身组件、首字母大写标签名，并初始化children为空数组。 uni-app 里用

v-for

递归渲染多级菜单为什么没反应？因为 uni-app 的 Vue 2 运行时（默认）不支持组件自调用，直接写

会报错或静默失败。必须显式声明递归组件名，并在

components

中注册自己。在组件 script 中定义

name: 'MenuItem'

（名称必须和模板中使用的标签名一致）

components

选项里要写

MenuItem: MenuItem

或直接写

MenuItem

（如果已用 import 引入）模板中不能用

小写形式——uni-app 编译器对自定义组件名大小写敏感，推荐首字母大写：

确保数据结构里每个子项都有

children

字段（哪怕为空数组），否则

v-if="item.children?.length"

在 Vue 2 下会报错，建议统一初始化为

[]

如何控制每级菜单的展开/收起状态而不互相影响？不能共用一个

isExpanded

布尔值，得为每个菜单项单独维护状态。最稳妥的方式是给原始数据“打补丁”，挂载响应式字段。用

JSON.parse(JSON.stringify(list))

深拷贝原始数据，避免污染源数据遍历所有节点，给每个对象添加

__expanded: false

（双下划线前缀防冲突）点击事件里用

this.$set(item, '__expanded', !item.__expanded)

确保响应式更新（Vue 2 限制）不要用

item.__expanded = ...

直接赋值，否则视图不会更新展开图标用

v-if="item.__expanded"

控制，比绑定 class 更可靠

onReachBottom

拉到底部加载更多时，怎么只展开当前层级？滚动加载和菜单展开是两个独立逻辑，但容易误绑在同一个事件上。关键在于区分触发源：点击图标是展开行为，滚动到底是数据追加行为。 uni-app电商系统实战精讲课程课件 uni-app电商系统实战精讲课程下载把菜单展开逻辑完全交给

@click

绑定的函数，例如

@click="toggleExpand(item)"

onReachBottom

只负责调用接口、拼接新数据到对应节点的

children

数组追加后需手动触发一次

this.$forceUpdate()

或对新增节点也执行

this.$set(...)

初始化

__expanded

如果用了

uni.loadMore

，注意它默认全局生效，多级菜单里要关掉：在页面

onLoad

里调用

uni.hideLoading()

+ 手动管理 loading 状态真机调试时点击无响应或层级错乱，常见原因有哪些？多数不是逻辑问题，而是平台差异或编译配置导致的隐性 bug。 H5 端正常、App 端失效：检查是否用了

touchstart

替代

click

（iOS 微信 WebView 对 click 有 300ms 延迟且偶发失效）子菜单位置偏移：父级

缺少

position: relative

，导致

absolute

定位的下拉层错位折叠后内容仍占空间：用

v-show

替代

v-if

会导致 DOM 仍在，改用

height: 0; overflow: hidden;

transition

更可控支付宝小程序不支持

ref

获取递归子组件实例——需要改用事件总线或 vuex 通信递归菜单真正的复杂点不在结构，而在状态隔离和跨端一致性。每个

__expanded

字段都要和对应数据节点强绑定，任何浅拷贝、引用复用、或编译器自动注入都可能让展开态“漂移”。

相关文章