应使用 uni-accordion 替代已废弃的 uni-collapse,因后者自 @dcloudio/uni-ui 1.4.0+ 起被彻底移除,硬用会报组件路径不存在错误;uni-accordion 官方持续维护、全端兼容、api 稳定。

直接用 uni-accordion,别碰已废弃的 uni-collapse —— 它在 2023 年后就被官方移除了,硬写会报错:Component is not found in path "uni_modules/uni-collapse/components/uni-collapse/uni-collapse"。
为什么不能用 uni-collapse?
这不是你配置的问题,是它根本不存在了。@dcloudio/uni-ui 1.4.0+ 版本已彻底下架 uni-collapse,连 npm 包里都找不到对应文件。很多教程还在教这个,但实际运行必报错。
常见错误现象:
-
Component is not found报错,控制台明确提示路径缺失 - HBuilderX 里写
<uni-collapse></uni-collapse>,编辑器直接标红、无代码提示 - 即使手动安装旧版
uni-collapse插件,也会和新版@dcloudio/uni-ui冲突,导致 H5 正常但小程序白屏
用 uni-accordion 替代最稳
它是官方唯一持续维护的折叠类组件,语义清晰、API 稳定、全平台兼容(H5 / 微信小程序 / App)。
实操步骤:
- 确保已安装最新版:
npm install @dcloudio/uni-ui@latest - 在页面
<script></script>中 import:import uniAccordion from '@dcloudio/uni-ui/lib/uni-accordion/uni-accordion.vue' - 注册组件:
components: { uniAccordion } -
active控制展开项:手风琴模式传Number(如0),多开模式传Array(如[0, 2]) - 数据结构必须是数组,每项含
title和content字段,或用slot="title"/slot="content"自定义内容
示例片段:
<uni-accordion :active="activeIndex"><uni-accordion-item v-for="(item, i) in faqList" :key="i"><view slot="title">{{ item.title }}</view><view slot="content">{{ item.content }}</view></uni-accordion-item></uni-accordion>
动态内容加载后高度错位?别信 init()
从接口拉 FAQ 数据再渲染,常出现展开后内容被截断、留大片空白 —— 这不是你数据没回来,是组件内部缓存了初始高度,异步内容插入后没重算。
uView 的 init() 方法在部分版本(如 2.0.34 前)有 bug:调了也不触发重绘;即便新版可用,也依赖 DOM 已就绪,而小程序里 createSelectorQuery 是异步的。
更可靠的做法:
- 给
slot="content"外层加:style="{ minHeight: 'auto' }"防止塌陷 - 避免依赖组件内部高度计算,改用
max-height+transition自控动画(见下一条) - 如果必须用第三方库,优先选 uView 2.0.34+ 或
@dcloudio/uni-ui1.4.0+,旧版兼容性风险高
要动画?别靠组件,自己用 max-height 控
uni-accordion 默认不带动画,且不支持 height: auto 过渡 —— CSS 无法对 auto 做 transition。
推荐方案(兼容性最好):
- 用
max-height代替height:设一个足够大的值(如500px),确保能容纳最长 FAQ 内容 - CSS 写法:
.content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }+.content.expanded { max-height: 500px; } - 安卓 WebView 对
max-height支持不稳定?换transform: scaleY(),配合origin-top保证从上展开 - 注意:父容器若为
display: flex,max-height动画会失效(小程序中 flex 子元素不响应 height 变化)
关键点:所有动画逻辑必须脱离组件封装,直接作用于内容容器,否则会被 uni-accordion 的内联样式覆盖或忽略。
真正麻烦的不是“怎么展开”,而是“展开后内容能不能撑开、动得顺不顺、在不同端有没有闪或卡”——这些细节在文档里不会写,但上线后第一个被用户吐槽。










