HarmonyOS 选项卡组件

参考示例如下：

@Entry
@Component
struct CustomTabPage {
  @State dataStrings: string[] =
    ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录'];
  private scroller: Scroller = new Scroller();
  private tabs: string[] =
    ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录'];
  private tabScroller: Scroller = new Scroller();
  @State selectedIndex: number = -1

  build() {
    Column() {
      this.getTabs()
      List({ space: 20, scroller: this.scroller }) {
        ForEach(this.dataStrings, (item: string) => {
          ListItem() {
            Text(item)
              .width('100%')
              .height(150)
              .fontSize(20)
              .textAlign(TextAlign.Center)
              .backgroundColor('#95efd2')
          }
        })
      }
      .backgroundColor('#eeeeee')
      .divider({ strokeWidth: 1, color: 0x222222 })
      .edgeEffect(EdgeEffect.None)
    }
    .height('100%')
    .width('100%')
  }

  @Builder
  private getTabs() {
    List({ space: 20, scroller: this.tabScroller }) {
      ForEach(this.tabs, (item: string, index: number) => {
        ListItem() {
          Text(item)
            .width(100)
            .height(40)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .backgroundColor(this.selectedIndex === index ? Color.Orange : '#eeeeee')
            .fontColor(Color.Black)
            .borderRadius(20)
        }
        .onClick(() => {
          if (this.selectedIndex === index) {
            return
          }
          this.selectedIndex = index

          this.refreshListData()
        })
      })
    }
    .backgroundColor(Color.White)
    .edgeEffect(EdgeEffect.None)
    .listDirection(Axis.Horizontal)
    .height(40)
    .scrollBar(BarState.Off)
  }

  refreshListData() {
    ///刷新数据
    if (this.selectedIndex % 2 === 1) {
      this.dataStrings.shift()
    } else if (this.selectedIndex % 2 === 0) {
      this.dataStrings.unshift('新的Tab')
    }
  }
}