HarmonyOS Tabs组件使用中，如果tab比较多，滚动时，如何让选中的当前tab自动滚蛋到页面中间展示？

Question

Tabs组件使用中，如果tab比较多，滚动时，如何让选中的当前tab自动滚蛋到页面中间展示？

Answer 1

参考demo：

@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider().strokeWidth(2).color('#007DFF').opacity(this.currentIndex === index ? 1 : 0)
    }
    .width('20%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {

        ForEach(['#F0C808', '#F2B0F5', '#3D1D6E', '#D84E48', '#F8F1A5', '#A4D5E2', '#D5F3C3', '#8B2D4D', '#7D7D7D', '#9A4F4F', '#1A8E7F', '#9E8FA3', '#B7C5D1', '#0D6E4B', '#E3C7C9', '#7B7B7B', '#B7B0D0', '#F0D5F2', '#A7F0C6', '#F1D6C0'], (item: string, index: number) => {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(item)
          }
          .tabBar(this.tabBuilder(index, item))
        })

      }
      .vertical(false)
      .barMode(BarMode.Scrollable)
      .barWidth(360)
      .barHeight(56)
      .animation( {duration:300})
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}