Collapse需按场景选模式：accordion为true时v-model用字符串，false时必须用数组；动态内容需$nextTick后调init()；样式优先用head-style/body-style；App端建议关闭show-animation。
uni-app 里用 Collapse 实现折叠面板，不是“装上就能用”，而是得看清它在哪种场景下会失效、哪些属性互斥、哪些行为需要手动干预。
手风琴模式和多开模式怎么选？关键看 accordion 值
默认是手风琴（accordion 为 true），点一个开一个，其他自动关。适合 FAQ、单步说明类场景。
要允许多个同时展开，必须显式设 :accordion="false"。这时候 v-model 的值类型就变了——不再是字符串，而是数组，比如 ['key1', 'key2']。
-
accordion为true时，v-model绑定的是当前唯一展开项的name（字符串） -
accordion为false时，v-model必须是数组，否则控制逻辑会错乱 - 别把
v-model和open混着用——文档明确警告：二者不可共存，否则状态不可预测
动态加载内容后高度错位？init() 不一定管用
从接口拉数据再渲染到 u-collapse-item 里，常出现展开后内容被截断或留大片空白。原因是组件在初始渲染时就缓存了内容高度，而异步数据回来时 DOM 已变，但缓存没更新。
官方提供的 init() 方法，在某些版本（尤其是 uView 2.0.34 之前）存在 bug：调用后不触发重绘，或者只对首次展开生效。
- 稳妥做法是：在数据加载完成、DOM 更新后，用
this.$nextTick(() => { this.$refs.myCollapse?.init?.() }) - 小程序端更麻烦，有时还得手动调
resize()（注意不是所有 Collapse 实现都暴露这个方法） - 如果仍不稳定，可退一步：给
body-style加min-height或用max-height+transition自行控制动画，绕过组件内部高度计算
样式改不动？优先用 head-style 和 body-style 而非全局覆盖
直接写 .u-collapse-item__header 这类类名去覆盖，容易因 scoped 样式或组件内部 class 变动而失效。uView 等主流库都提供了内联样式 Props，这才是稳定入口。
-
:head-style="{ backgroundColor: '#f8f9fa', borderRadius: '6px' }'控制标题栏 -
:body-style="{ padding: '12px 16px', borderTop: 'none' }'控制内容区 - 避免用
!important，它会让后续主题切换、暗色模式适配变得极其困难 - 图标替换不要动组件源码，用
title插槽自定义整个标题区域，里面塞u-icon或image
App 端动画卡顿？先关掉 show-animation
App 端（尤其是低端 Android）开启 height 动画，极易引发掉帧甚至白屏。这不是你代码的问题，是原生渲染层对 CSS height 过渡支持差导致的。
uni-app 官方也明确建议：App 端默认关闭动画。别迷信“有动画才专业”，用户感知到的流畅，远比视觉过渡重要。
- 统一加
:show-animation="false"，在 H5 和小程序保留动画即可 - 如果非要 App 端有反馈，改用 transform: scaleY(0) → scaleY(1)，性能好得多，但需自己封装过渡逻辑
- 别忘了检查 manifest.json 里是否误开了 nvue 的特殊编译配置，某些旧版 nvueStyleCompiler 会干扰动画渲染
最易被忽略的一点：所有 u-collapse-item 必须有 name 属性（哪怕只是字符串索引），尤其在 v-for 渲染时。缺 name 会导致 v-model 数组无法正确映射，展开状态随机丢失——这个坑没有报错，只有 QA 测试时才会暴露。
