鸿蒙 5 开发宝藏案例分享 --- 一多分级导航栏开发实践

// 底部TabBar魔法代码Tabs({ barPosition: BarPosition.End }) {  TabContent().tabBar('首页')  TabContent().tabBar('消息')  TabContent().tabBar('我的')}.vertical(false) // 横向排列.onChange((index) => {  // 处理Tab切换逻辑  this.switchMainContent(index);})

// 侧边栏炫技代码SideBarContainer(SideBarContainerType.Embed) {  // 左侧导航区  Column() {    ForEach(this.firstLevelTabs, (item) => {      NavigationItem({         title: item.name,        hasSub: item.children.length > 0       })    })  }  .width(240)    // 右侧内容区  Column() {    TopTabView() // 二级导航    ContentDisplay() // 主内容区  }}.sideBarWidth(240)

@Link @Watch('secondLevelIndex') currentSubTab: number = 0;