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

应用底部导航实现

HarmonyOS

dickhome

2024-05-26 14:32:57

1390浏览

回答 1

按赞同

按时间

e_leaner

核心代码

@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); 
  })) 
} 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.