uniapp 多级折叠列表如何实现

在uniapp中如何实现多级折叠列表功能？我需要一个可以无限层级展开和收起的列表组件，类似树形菜单的效果。目前尝试过使用uni-collapse组件，但只能实现单级折叠，无法支持多级嵌套。请问有没有现成的插件或组件可以实现这个功能？或者需要自己手写实现的话，有没有推荐的实现思路和代码示例？最好能兼顾性能优化，避免多层嵌套导致的渲染卡顿问题。

2 回复

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


在 UniApp 中，实现多级折叠列表可以通过递归组件或动态数据渲染来实现。以下是一个基于 uni-collapse 组件的简单示例，支持多级嵌套：

实现思路

  1. 使用 uni-collapse 和 uni-collapse-item 作为基础折叠组件。
  2. 通过递归或嵌套数据动态渲染子级列表。
  3. 结合 v-for 循环和条件判断处理层级结构。

示例代码

<template>
  <view>
    <uni-collapse>
      <!-- 遍历一级列表 -->
      <uni-collapse-item v-for="(item, index) in listData" :key="index" :title="item.title">
        <!-- 如果有子级，递归渲染 -->
        <view v-if="item.children && item.children.length">
          <nested-list :list="item.children"></nested-list>
        </view>
        <view v-else>
          {{ item.content }}
        </view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          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' }
      ]
    }
  }
}
</script>

递归组件（可选）

如果需要更灵活的多级支持，可以封装一个递归组件：

  1. 创建 nested-list.vue 组件：
<template>
  <uni-collapse>
    <uni-collapse-item v-for="(item, idx) in list" :key="idx" :title="item.title">
      <view v-if="item.children && item.children.length">
        <nested-list :list="item.children"></nested-list>
      </view>
      <view v-else>
        {{ item.content }}
      </view>
    </uni-collapse-item>
  </uni-collapse>
</template>

<script>
export default {
  name: 'nested-list',
  props: {
    list: Array
  }
}
</script>
  1. 在父页面中引入并使用：
<template>
  <view>
    <nested-list :list="listData"></nested-list>
  </view>
</template>

<script>
import nestedList from '@/components/nested-list.vue'
export default {
  components: { nestedList },
  data() {
    return {
      listData: [...] // 同上示例数据
    }
  }
}
</script>

注意事项

  • 确保数据格式正确，包含 title、children 等字段。
  • 使用递归组件时注意性能，避免过深嵌套。
  • 可通过 CSS 自定义样式，如缩进、边框等。

此方法支持无限级折叠，适用于菜单、分类等场景。

回到顶部