HarmonyOS Next Tabs组件使用 原创

Tabs可以搭配TabContent使用也可以搭配Swiper使用，本文介绍和Swiper搭配使用

@Component
export struct Colleague{
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  @State selectedIndex: number = 0
  private controller: TabsController = new TabsController()
  private swiperController: SwiperController = new SwiperController()
  tabs:string[]=['生活服务','办公必备','出行出差','人资服务','财务服务','公司新闻'];
  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .width(20)
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }.width(81)
  }
  build() {
    Column(){
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        ForEach(this.tabs,(item: string, index:number)=>{
          TabContent() {
          }.tabBar(this.tabBuilder(index,item))
        })

      }
      .width('100%')
      .height('auto')
      .barMode(BarMode.Scrollable)
      .divider({strokeWidth:1,color:Color.Gray}) //底部内容和tabs的分界线设置
      .margin({top:60})
      .onChange((index: number) => {
        // currentIndex控制TabContent显示页签
        this.currentIndex = index
        this.selectedIndex = index
        this.swiperController.changeIndex(index, true)
      })

      Swiper(this.swiperController){
        ForEach(this.tabs,(item: string, index:number)=>{
          Stack(){
            Text(item).fontColor(Color.Red).fontSize(24)
          }.alignContent(Alignment.Center)
          .backgroundColor(Color.Yellow)
          .width('100%')
          .height('100%')
        })
      }
      .indicator(false) //设置可选导航点指示器样式
      .height(200)
      .loop(false)  //设置是否开启循环
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
        this.currentIndex = targetIndex
        this.controller.changeIndex(targetIndex)
      })
      .disableSwipe(false) //设置禁用组件滑动切换功能。
    }.width('100%')
    .height('100%')
    .backgroundColor(Color.White)

  }
}