我们在HarmonyOS开发中，如何实现应用的自定义标签页？

Question

我们在HarmonyOS开发中，如何实现应用的自定义标签页？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

自定义标签页可以用于在同一个界面中切换不同的内容。

@Entry
@Component
struct CustomTabViewApp {
  @State activeTab: number = 0;

  changeTab(tabIndex: number) {
    this.activeTab = tabIndex;
  }

  build() {
    return (
      <UI.Page>
        <UI.TabBar activeIndex={this.activeTab}>
          <UI.TabItem label="Tab 1" onClick={() => this.changeTab(0)} />
          <UI.TabItem label="Tab 2" onClick={() => this.changeTab(1)} />
          <UI.TabItem label="Tab 3" onClick={() => this.changeTab(2)} />
        </UI.TabBar>
        <UI.View>
          {this.activeTab === 0 && <UI.Label text="Content for Tab 1" />}
          {this.activeTab === 1 && <UI.Label text="Content for Tab 2" />}
          {this.activeTab === 2 && <UI.Label text="Content for Tab 3" />}
        </UI.View>
      </UI.Page>
    );
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。