应用底部导航实现，有人知道处理方案吗？

@Entry 
@Component 
struct Index { 
 @State message: string = 'Hello World'; 
 @State selectTabIndex: number = 3; 
 @State test: string[] = ["1", "2", "4", "4", "5", "6", "7", "8", "9", "9", "9",] 
 @State tabs: string[] = ["直播日历", "城市专享优惠", "发布会", "非常会玩机", "精选推荐", "特色门店百家游"] 
 listScroller: Scroller = new Scroller() 
 tabsController: TabsController = new TabsController() 
​ 
 build() { 
   Column() { 
     Tabs({ index: this.selectTabIndex, barPosition: BarPosition.Start, controller: this.tabsController }) { 
       ForEach(this.tabs, (item: string, index) => { 
         TabContent() { 
           Text(item) 
        } 
        .height(0) 
        .layoutWeight(1) 
        .tabBar(this.buildTab(item, index)) 
      }, (item: string, index: number) => item + index) 
    } 
    .height(0) 
    .barHeight(200) 
    .layoutWeight(1) 
    .fadingEdge(false) 
    .barMode(BarMode.Scrollable) 
    .onChange(index => { 
       this.selectTabIndex = index; 
    }) 
  } 
  .height('100%') 
  .width('100%') 
  .backgroundColor(0xf0fff0) 
} 
​ 
 @Builder 
 buildTab(title: ResourceStr, targetIndex: number) { 
   Column() { 
     Text(title) 
      .fontColor(this.selectTabIndex === targetIndex ? $r('sys.color.ohos_id_color_subtab_text_on') : $r('sys.color.ohos_id_color_subtab_text_off')) 
      .padding({ top: 10, bottom: 10 }) 
      .fontFamily($r('sys.string.ohos_id_text_font_family_medium')) 
      .fontSize($r('sys.float.ohos_id_text_size_body1')) 
  } 
  .margin({ 
     left: 10, 
     right: 10 
  }) 
​ 
  .justifyContent(FlexAlign.Center) 
  .borderWidth({ bottom: 10, left: 0, right: 0, top: 0 }) 
  .borderColor(this.selectTabIndex === targetIndex ? $r('sys.color.ohos_id_color_subtab_text_on') : Color.Transparent) 
  .onClick((e => { 
     this.tabsController.changeIndex(targetIndex); 
  })) 
} 
}