uni-app怎么实现带有折叠效果的常见问题FAQ列表展示

畫卷琴夢

畫卷琴夢

2026-06-23

734人浏览

原创

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

uni-app怎么实现带有折叠效果的常见问题faq列表展示

直接用 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]
  • 数据结构必须是数组,每项含 titlecontent 字段,或用 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 数据再渲染,常出现展开后内容被截断、留大片空白 —— 这不是你数据没回来,是组件内部缓存了初始高度,异步内容插入后没重算。

jQuery常见问题列表下拉收缩特效
jQuery常见问题列表下拉收缩特效

jQuery常见问题列表下拉收缩特效是一款问答文字列表点击标题下拉收缩展示内容效果。

下载

uView 的 init() 方法在部分版本(如 2.0.34 前)有 bug:调了也不触发重绘;即便新版可用,也依赖 DOM 已就绪,而小程序里 createSelectorQuery 是异步的。

更可靠的做法:

  • slot="content" 外层加 :style="{ minHeight: 'auto' }" 防止塌陷
  • 避免依赖组件内部高度计算,改用 max-height + transition 自控动画(见下一条)
  • 如果必须用第三方库,优先选 uView 2.0.34+ 或 @dcloudio/uni-ui 1.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: flexmax-height 动画会失效(小程序中 flex 子元素不响应 height 变化)

关键点:所有动画逻辑必须脱离组件封装,直接作用于内容容器,否则会被 uni-accordion 的内联样式覆盖或忽略。

真正麻烦的不是“怎么展开”,而是“展开后内容能不能撑开、动得顺不顺、在不同端有没有闪或卡”——这些细节在文档里不会写,但上线后第一个被用户吐槽。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

常见问题 uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

1062

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

2187

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

2080

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

2229

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

333

5

vue2.0和3.0区别
vue2.0和3.0区别

vue2.0和3.0区别:vue2的响应式原理是利⽤“Object.defineProperty()”对数据进⾏劫持结合发布订阅模式的⽅式来实现,vue3中使⽤了es6的proxy API对数据代理,实现对数据的监控。本专题为大家提供vue2.0和3.0区别的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.17

572

5

vue3的生命周期有哪些
vue3的生命周期有哪些

vue3的生命周期:1、beforecreate;2、created;3、beforemount;4、mounted;5、beforeupdate;6、updated;7、beforedestroy;8、destroyed;9、activated;10、deactivated等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.02.23

10598

5

Vue3组合式API与组件开发实战
Vue3组合式API与组件开发实战

本专题讲解 Vue 3 组合式 API 的核心概念与应用技巧,深入分析响应式系统、生命周期管理、组件设计与复用策略。通过完整项目案例,指导前端开发者实现高性能、结构清晰的 Vue 应用,提升开发效率与代码可维护性。

2026.02.10

153

23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习