鸿蒙HarmonyOS实战-ArkUI组件（Tabs）_鸿蒙tabs组件

 一、Tabs

Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包含一个面板和一个标签，用户可以通过点击标签来切换面板。Tabs组件通常用于展示多个相关但又不需要同时展示的数据集合或功能集合，以提高页面的可维护性和可用性。

Tabs组件的主要功能包括：

1. 切换选项卡：用户可以通过点击标签来切换显示面板。
2. 激活状态：当前选中的标签会呈现激活状态，以便用户清楚地知道他们当前所在的选项卡。
3. 自定义选项卡内容：用户可以通过自定义选项卡内容（例如图片、文本、图标等）来增强页面的可读性和可用性。
4. 加载延迟：如果页面需要加载大量数据或内容，Tabs组件可以通过延迟加载未激活的面板来提升页面性能。

1.基本布局

Tabs使用花括号包裹TabContent，每一个TabContent对应一个tabBar

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];
 
  build() {
    Column() {
      Tabs() {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')
 
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')
 
        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')
 
        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

2.导航位置

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/848163