HarmonyOS 列表滑动和tabs联动业务需求实现

参考示例如下：

// xxx.ets
@Entry
@Component
struct TabsExample {
  scroller: Scroller = new Scroller()
  listScroller: ListScroller = new ListScroller()
  @State tabArray: string[] = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"];
  @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(16)
        .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(100)
  }

  private timeTable: TimeTable[] = [
    {
      title: '星期一',
      projects: ['语文', '数学', '英语']
    },
    {
      title: '星期二',
      projects: ['物理', '化学', '生物']
    },
    {
      title: '星期三',
      projects: ['历史', '地理', '政治']
    },
    {
      title: '星期四',
      projects: ['美术', '音乐', '体育']
    }, {
    title: '星期五',
    projects: ['物理', '化学', '生物']
  },
    {
      title: '星期六',
      projects: ['历史', '地理', '政治']
    },
    {
      title: '星期日',
      projects: ['美术', '音乐', '体育']
    }
  ]

  @Builder
  itemHead(text: string, index: number) {
    Text(text)
      .fontSize(20)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(10)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        ForEach(this.tabArray, (item: string, index: number) => {
          TabContent() {
          }.tabBar(this.tabBuilder(index, item)).width(0)
        })

      }
      .vertical(false)
      .barMode(BarMode.Scrollable)
      .barWidth("100%")
      .barHeight(56)
      .onChange((index: number) => {
        this.currentIndex = index
        this.listScroller.scrollToItemInGroup(index, 0, true, ScrollAlign.START)
      })
      .width("100%")
      .height(56)
      .backgroundColor('#F1F3F5')


      List({ space: 20, scroller: this.listScroller }) {
        ForEach(this.timeTable, (item: TimeTable, index: number) => {
          ListItemGroup({ header: this.itemHead(item.title, index) }) {
            ForEach(item.projects, (project: string) => {
              ListItem() {
                Text(project)
                  .width("100%")
                  .height(100)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(0xFFFFFF)
              }
            }, (item: string) => item)
          }
          .divider({ strokeWidth: 1, color: Color.Blue })
        })
      }
      .width('90%')
      .sticky(StickyStyle.Header)
      .scrollBar(BarState.Off)
      .onScrollIndex((start: number) => this.classifyChangeAction(start))

    }
    .height('80%')
    .width('100%')

  }

  classifyChangeAction(index: number): void {
    if (this.currentIndex !== index) {
      // change the classify status.
      this.currentIndex = index;
      this.controller.changeIndex(index)
    }
  }
}

interface TimeTable {
  title: string;
  projects: string[];
}