uniapp 多级菜单栏自定义

在uniapp中实现多级菜单栏的方式有很多种，这里介绍一种比较常见的方法，即使用递归组件来实现。

首先，我们需要定义一个菜单栏的数据结构，可以使用一个数组来存储菜单项的信息，每个菜单项应该包括菜单项的名称、URL、子菜单等信息。例如：

[
  {
    name: '菜单1',
    url: '/menu1',
    children: [
      {
        name: '子菜单1-1',
        url: '/menu1-1',
        children: []
      },
      {
        name: '子菜单1-2',
        url: '/menu1-2',
        children: []
      }
    ]
  },
  {
    name: '菜单2',
    url: '/menu2',
    children: [
      {
        name: '子菜单2-1',
        url: '/menu2-1',
        children: []
      },
      {
        name: '子菜单2-2',
        url: '/menu2-2',
        children: [
          {
            name: '子菜单2-2-1',
            url: '/menu2-2-1',
            children: []
          },
          {
            name: '子菜单2-2-2',
            url: '/menu2-2-2',
            children: []
          }
        ]
      }
    ]
  }
]

接下来，我们可以使用一个递归组件来显示菜单栏。递归组件是指组件内部调用自身的情况，因为菜单栏可能有多级结构，所以使用递归组件可以方便地处理多级菜单栏的情况。

在递归组件中，我们可以使用uni-ui的tree组件来显示菜单项，如果菜单项包含子菜单，我们可以在tree组件的slot中再次调用递归组件来显示子菜单。

以下是一个简单的示例代码：

<template>
  <tree :nodes="menu" class="menu" @click="handleClick"></tree>
</template>

<script>
import { tree } from 'uni-ui'

export default {
  components: {
    tree
  },
  data() {
    return {
      menu: [
        {
          name: '菜单1',
          url: '/menu1',
          children: [
            {
              name: '子菜单1-1',
              url: '/menu1-1',
              children: []
            },
            {
              name: '子菜单1-2',
              url: '/menu1-2',
              children: []
            }
          ]
        },
        {
          name: '菜单2',
          url: '/menu2',
          children: [
            {
              name: '子菜单2-1',
              url: '/menu2-1',
              children: []
            },
            {
              name: '子菜单2-2',
              url: '/menu2-2',
              children: [
                {
                  name: '子菜单2-2-1',
                  url: '/menu2-2-1',
                  children: []
                },
                {
                  name: '子菜单2-2-2',
                  url: '/menu2-2-2',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleClick(node) {
      // 处理菜单项的点击事件
      console.log(node)
    }
  }
}
</script>

<style scoped>
.menu {
  height: 100%;
}
</style>

在实际开发中，需要根据具体的需求来调整菜单栏的样式和交互效果，但是使用递归组件来实现多级菜单栏的基本思路是相同的。