uni-app 官方已移除 uni-collapse 组件,推荐使用 uni-accordion 替代;若需自定义则须手动实现高度动画,注意小程序异步获取高度及第三方库兼容性问题。

uni-app 里没有内置 uni-collapse 组件
官方基础组件库(@dcloudio/uni-ui)在 2023 年后已移除 uni-collapse,当前最新版(如 1.4.0+)不再提供。直接写 会报错:Component is not found in path "uni_modules/uni-collapse/components/uni-collapse/uni-collapse"。
这意味着你不能像 Vue 项目里引入 Element Plus 那样直接用现成折叠面板 —— 必须自己实现或换方案。
用 uni-accordion 替代是最省事的选择
uni-accordion 是官方保留并持续维护的可折叠手风琴组件,语义和交互与 collapse 高度一致,支持单选/多选、禁用、自定义标题区内容,且兼容 H5、小程序、App 全平台。
使用前确保已安装最新版 @dcloudio/uni-ui:
npm install @dcloudio/uni-ui@latest
然后在页面中按如下方式使用:
- 在
<script></script>中通过import引入:import uniAccordion from '@dcloudio/uni-ui/lib/uni-accordion/uni-accordion.vue' - 在
components选项中注册:components: { uniAccordion } - 数据格式为数组,每项含
title和content(也可用默认插槽放任意结构) - 控制展开项用
active属性:单选传Number,多选传Array
示例片段:
<uni-accordion :active="activeIndex"><uni-accordion-item v-for="(item, i) in list" :key="i"><view slot="title">{{ item.title }}</view><view slot="content">{{ item.content }}</view></uni-accordion-item></uni-accordion>
手写 collapse 要注意高度动画和过渡时机
如果必须自定义样式或行为(比如不想要手风琴互斥逻辑),就得手动实现。核心难点不是折叠逻辑,而是平滑过渡 —— uni-app 的 view 不支持 max-height: 0 → auto 的 CSS 过渡(auto 无法参与动画)。
可行做法是用 height + overflow: hidden,并在 JS 中精确计算内容高度:
- 初始状态设
height: 0; overflow: hidden - 点击展开时,先用
uni.createSelectorQuery()获取content区域真实高度 - 再用
animation或transition动态设置height到目标值 - 收起时反向设回
0,完成后清空内联height以支持响应式重排
注意:小程序平台对 createSelectorQuery 有异步延迟,需配合 $nextTick 或 setTimeout 确保 DOM 已渲染;H5 下可直接用 offsetHeight。
第三方 UI 库的兼容性风险要提前验证
有人会想到引入 uView 或 uv-ui 的 u-collapse。但要注意:uView 2.x 基于 uni-app 2.x(Vue 3),而很多老项目还在用 Vue 2 版本的 uni-app;uv-ui 虽支持双版本,但其 collapse 在微信小程序中存在 slot 渲染异常问题(内容不显示或错位)。
若坚持用第三方方案,务必在目标平台(尤其是微信/支付宝小程序)真机测试以下场景:
- 动态增删面板项后是否能正确计算高度
- 嵌套
scroll-view或swiper时是否触发滚动冲突 - 折叠状态下调用
scrollIntoView是否仍能定位到目标元素
这些细节在文档里通常不会写,但上线后容易卡住发布节奏。











