HarmonyOS Scroll中嵌套一个自定义TabBar的Tabs，如何实现吸顶

参考示例：

1、index.ets

import { CustomListItem } from './CustomListItem';

@Entry
@Component
struct Index {
  private scrollerForScroll: Scroller = new Scroller();
  private scrollerForList: Scroller = new Scroller();
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  @State tabArray: Array<string> = ['关注', '推荐', '热榜', '投顾']
  @State focusIndex: number = 0
  private subsController: TabsController = new TabsController()

  //单独的页签
  @Builder
  Tab(tabName: string, tabIndex: number) {
    Row({ space: 20 }) {
      Text(tabName)
        .fontSize(tabIndex === this.focusIndex ? 21 : 18)
        .fontColor(tabIndex === this.focusIndex ? Color.Black : '#ffb7b7b7')
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .width(60)
    .height(40)
    .borderRadius({ topLeft: 10, topRight: 10 })
    .onClick(() => {
      this.subsController.changeIndex(tabIndex)
      this.focusIndex = tabIndex
    })
  }

  build() {
    Column() {
      Column() {
        Scroll(this.scrollerForScroll) {
          Column() {
            Column() {
              Text("演示tabs的上层页面1")
            }
            .backgroundColor(Color.Orange)
            .height("170")
            .width('100%')

            Column() {
              Text("演示tabs的上层页面1")
            }
            .backgroundColor(Color.Green)
            .height("150")
            .width('100%')

            Column() {
              //tabBar
              Row({ space: 7 }) {
                Scroll() {
                  Row() {
                    ForEach(this.tabArray, (item: string, index: number) => {
                      this.Tab(item, index)
                    })
                  }
                  .justifyContent(FlexAlign.Start)
                }
                .align(Alignment.Start)
                .scrollable(ScrollDirection.Horizontal)
                .scrollBar(BarState.Off)
                .width('90%')
              }
              .alignItems(VerticalAlign.Bottom)
              .width('100%')

              // tabs
              Tabs({ barPosition: BarPosition.Start, controller: this.subsController }) {
                TabContent() {
                  List({ space: 10, scroller: this.scrollerForList }) {
                    //引入view
                    CustomListItem()

                    ListItem().height(28)
                  }
                  .padding({ left: 10, right: 10 })
                  .width('100%')
                  .height('100%')
                  .edgeEffect(EdgeEffect.None)
                  .scrollBar(BarState.Off)
                  //tabbar吸顶通过原生属性配合calc计算高度实现
                  .nestedScroll({
                    scrollForward: NestedScrollMode.PARENT_FIRST,
                    scrollBackward: NestedScrollMode.SELF_FIRST
                  })

                }.tabBar('关注')

                TabContent() {
                  Text('推荐')
                }.tabBar('推荐')
                .backgroundColor(Color.Yellow)


                TabContent() {
                  Text('热榜')
                }.tabBar('热榜')
                .backgroundColor(Color.Pink)

                TabContent() {
                  Text('投顾')
                }.tabBar('投顾')
                .backgroundColor(Color.Orange)

              }
              .width('100%')
              .height('100%')
              .barHeight(0)
              .animationDuration(100)
              .onChange((index: number) => {
                console.log('foo change')
                this.focusIndex = index
              })
            }
            //这一步很关键，控制吸顶距离
            .height('100%')
            .backgroundColor('#F1F3F5')

          }
        }
        .scrollBar(BarState.Off)
        .width('100%')
        .height('100%')

      }
      .width('100%')
      .height('100%')
      .backgroundColor(0xDCDCDC)
    }.width('100%')
  }
}

2、CustomListItem.ets

@Component
@Entry
export struct CustomListItem {
  @State schoolMajors: number[] | null =
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]

  build() {
    Column({ space: 30 }) {

      ForEach(this.schoolMajors, (item: number) => {
        Row() {
          Image($r("app.media.startIcon"))
            .width(60)
            .height(60)
            .margin({ right: 10 })

          Text("CustomListItem Test")
            .height(60)
            .margin({ right: 10 })
        }
        .margin({ left: 10 })
      }, (item: number) => item.toString() + Math.random())

    }
  }
}