uniapp 多级折叠面板如何实现

在uniapp中如何实现多级折叠面板功能？需要支持无限层级嵌套，并且每个层级都可以单独展开/折叠。目前尝试使用uView的collapse组件只能实现一级折叠，请问有没有现成的组件或者实现方案？最好能提供代码示例和效果演示。

2 回复

使用uni-collapse组件，嵌套uni-collapse-item实现多级折叠面板。在子级uni-collapse-item中再放置uni-collapse即可。注意设置accordion属性控制是否手风琴模式。


在 UniApp 中实现多级折叠面板（可嵌套展开/收起）可以通过以下步骤完成，主要依赖 uni-collapse 组件和自定义样式逻辑。以下是实现方法及代码示例：

实现思路

  1. 使用 uni-collapse 组件作为基础折叠容器。
  2. 通过嵌套 uni-collapse-item 或自定义视图实现多级结构。
  3. 利用 open 事件或 v-model 控制展开状态，结合 CSS 实现动画效果。

代码示例

<template>
  <view>
    <uni-collapse>
      <!-- 一级折叠项 -->
      <uni-collapse-item title="一级标题1">
        <view>一级内容1</view>
        <!-- 二级折叠面板 -->
        <uni-collapse accordion>
          <uni-collapse-item title="二级标题1-1">
            <view>二级内容1-1</view>
          </uni-collapse-item>
          <uni-collapse-item title="二级标题1-2">
            <view>二级内容1-2</view>
          </uni-collapse-item>
        </uni-collapse>
      </uni-collapse-item>
      
      <uni-collapse-item title="一级标题2">
        <view>一级内容2</view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style>
/* 可选：自定义样式 */
.uni-collapse-item__title {
  font-weight: bold;
}
</style>

关键点说明

  • 嵌套结构：在 uni-collapse-item 内容中嵌入新的 uni-collapse 实现多级。
  • 手风琴模式：添加 accordion 属性可使同一级仅展开一项（可选）。
  • 动态控制：通过 v-model 绑定数组或使用 open 事件管理展开状态（例如：<uni-collapse :value="openList">）。

注意事项

  • 确保使用官方 uni-collapse 组件（需导入或通过 HBuilderX 创建项目时选择相关模板）。
  • 多级嵌套时注意数据层次，避免样式冲突。

以上代码可实现基础多级折叠面板，根据需求调整内容和样式即可。

回到顶部