用uniapp写一份左侧有二级菜单的单页面文件

在UniApp中创建一个带有二级菜单的单页面应用，通常我们会使用组件化开发的方式。首先，你需要安装并熟悉Vue框架，因为UniApp基于Vue.js。下面是一个简单的步骤指南： 1. **初始化项目**: 使用`uni-app-cli`命令行工具创建一个新的项目： ``` uni create my-project ``` 2. **设置目录结构**: 创建一个名为`components`的文件夹用于存放你的自定义组件。在这个文件夹下，创建两个子文件夹，分别叫`nav`和`menu`，分别对应一级菜单和二级菜单。 3. **一级菜单组件** (`components/nav/index.vue`): ```html <template> <view class="nav"> <cell v-for="(item, index) in items" :key="index" :value="item.name" title="{{ item.name }}"> {{ item.subItems ? '<sub-menu :items="item.subItems"/>' : '点击跳转' }} </cell> </view> </template> <script> export default { data() { return { items: [ { name: '菜单一', subItems: [{ name: '子菜单一' }, { name: '子菜单二' }] }, // 添加更多一级菜单项... ] }; } } </script> ``` 4. **二级菜单组件** (`components/menu/sub-menu.vue`): ```html <template> <view> <cell-group> <cell v-for="(subItem, index) in $parent.item.subItems" :key="index" :value="subItem.name" title="{{ subItem.name }}"> <!-- 内部跳转逻辑或链接 --> <navigator :url="'pages/your-page-name' + (subItem.url ? `?param=${subItem.url}` : '')"/> </cell> </cell-group> </view> </template> ``` 5. **主页面组件** (`pages/main/index.vue`): 引入并使用一级菜单组件： ```html <template> <view> <nav :items="mainMenuItems"></nav> </view> </template> <script> import Nav from '@/components/nav/index.vue'; export default { components: { Nav, // 如果需要的话，可以引入二级菜单组件 SubMenu: () => import('@/components/menu/sub-menu.vue') }, data() { return { mainMenuItems: [ /* ... 照上一步的数据填充 */ ] }; } } </script> ``` 6. **导航管理**: 在实际应用中，你可能还需要在路由配置或全局配置里处理菜单和权限管理，这取决于项目的具体需求。