uniapp如何实现多级折叠列表

在uniapp中如何实现多级折叠列表？需要支持无限层级嵌套，并且点击父级节点时可以展开或折叠子级内容。目前尝试过使用uView的Collapse组件，但只能实现一级折叠，无法处理多级嵌套的情况。请问是否有现成的组件或方案可以实现这个功能？最好能提供具体的代码示例或实现思路。

2 回复

在uni-app中实现多级折叠列表，可以使用递归组件或嵌套<view>配合v-for。通过v-if或class控制子级显示隐藏，结合点击事件切换展开状态。数据建议用树形结构，包含children字段标识子级。


在 UniApp 中实现多级折叠列表，可以通过递归组件或动态数据渲染实现。以下是使用 uni-collapse 组件的简单方法，支持多级嵌套：

实现步骤：

  1. 数据结构：使用嵌套数组表示多级关系，每个项包含 title（标题）、children（子项）。
  2. 递归渲染：通过组件递归调用自身处理子级。

示例代码：

<template>
  <view>
    <uni-collapse accordion>
      <uni-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
        <!-- 递归渲染子级 -->
        <nested-list :list="item.children" v-if="item.children && item.children.length" />
        <view v-else>{{ item.content }}</view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
export default {
  name: 'nested-list',
  props: {
    list: Array // 接收列表数据
  }
}
</script>

数据示例：

data() {
  return {
    list: [
      {
        title: '一级 1',
        children: [
          { title: '二级 1-1', content: '内容 1-1' },
          { 
            title: '二级 1-2', 
            children: [
              { title: '三级 1-2-1', content: '内容 1-2-1' }
            ]
          }
        ]
      },
      { title: '一级 2', content: '内容 2' }
    ]
  }
}

说明：

  • 使用 uni-collapse 和 uni-collapse-item 实现折叠效果。
  • 通过递归组件 nested-list 处理无限层级。
  • 需安装 uni-ui 组件库（如未安装）：npm install @dcloudio/uni-ui

注意事项：

  • 确保数据层级正确，避免循环引用。
  • 可根据需求自定义样式或添加图标。

此方法简洁高效，适用于大多数多级列表场景。

回到顶部