HarmonyOS Tab导航demo

@Entry
@Component
struct TabsExample1 {
  @State currentIndex: number = 0

  @Builder tabBuilder(title: string, targetIndex: number) {
    Column() {
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('首页的内容')
        }.tabBar(this.tabBuilder('首页', 0))

        TabContent() {
          Text('发现的内容')
        }.tabBar(this.tabBuilder('发现', 1))

        TabContent() {
          Text('推荐的内容')
        }.tabBar(this.tabBuilder('推荐', 2))

        TabContent() {
          Text('我的内容')
        }.tabBar(this.tabBuilder('我的', 3))
      }
      .animationDuration(0)
      .backgroundColor('#F1F3F5')
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }.width('100%')
  }
}
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.