鸿蒙HarmonyOS开发：tabs结合tabContent实现底部tabBar导航栏页面布局

@Entry
@Component
struct TabsPage2 {
  build() {
    Column() {
      Tabs() {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }
    .width('100%')
    .height('100%')
  }
}

@Entry
@Component
struct TabsPage2 {
  @State tabsList: Array<string> = ['关注', '视频', '游戏', '数码', '科技', '体育', '影视', '人文', '艺术', '自然', '军事'];

  build() {
    Column() {
      Tabs() {
        ForEach(this.tabsList, (item: string) => {
          TabContent() {
            Text(item).fontSize(30)
          }
          .tabBar(item)
        })
      }.barMode(BarMode.Scrollable)
    }
    .width('100%')
    .height('100%')
  }
}