HarmonyOS鸿蒙Next中如何解决tabs嵌套支持二级分类滑动到最后一个时切换一级分类title到下一个位置的问题

请参考以下代码：

@Entry
@Component

struct NestedCeiling {

  private listArr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

  private scrollerForScroll: Scroller = new Scroller();

  private scrollerForList: Scroller = new Scroller();

  @State currentIndexTop:number = 0;//上层tabs索引

  @State currentIndexUnder:number = 0;//下层tabs索引

  @Builder
  tabBuilder(index: number, name: string) {
    Column () {
      Text(name)
        .fontSize($r('app.float.middle_font_size'))
        .lineHeight($r('app.float.title_line_height'))
        .margin({
          top: $r('app.float.title_margin_top'),
          bottom: $r('app.float.title_margin_bottom')
        })
    }
  }

  @Builder
  listBuilder(listName: string, index: number) {
    Column () {
      Text(listName)
        .fontColor(this.currentIndexTop == index?'#007DFF':Color.Gray)
        .onClick(()=>{
          this.currentIndexTop = index
          this.currentIndexUnder = 0
        })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndexTop === index ? 1 : 0)
    }.width('100%')
  }

  //第四个参数，自主标记是否为最后一个
  @Builder
  listBuilder2(listName: string, index: number){
    //todo 2、判断为最后一个TabContent时增加拖拽事件
    if(index == 4){
      TabContent () {
        List({ space: 10, scroller: this.scrollerForList }) {
          ForEach(this.listArr, (item: number) => {
            ListItem () {
              Text(listName + item)
                .width('100%')
                .height('100%')
                .borderRadius($r('app.float.list_item_radius'))
                .fontSize($r('app.float.middle_font_size'))
                .fontWeight(500)
                .padding({ left: $r('app.float.list_item_padding') })
                .backgroundColor(Color.White)
            }
          }, (item: string) => JSON.stringify(item))
        }
        .padding({
          left: $r('app.float.list_padding'),
          right: $r('app.float.list_padding')
        })
        .width('100%')
        .height('100%')
        .edgeEffect(EdgeEffect.None)
        .scrollBar(BarState.Off)
        .nestedScroll({
          scrollForward: NestedScrollMode.PARENT_FIRST,
          scrollBackward: NestedScrollMode.SELF_FIRST
        })
      }
      //todo 3、绑定手势动作
      .gesture(
        // 绑定拖动手势，向右，移动距离为5vp（默认）时触发
        PanGesture({direction:PanDirection.Left})
          .onActionStart(() => {
            if (this.currentIndexTop == 2) {
              this.currentIndexTop = 0
            } else {
              this.currentIndexTop++
            }
            this.currentIndexUnder=0
          })
      )
      .tabBar(SubTabBarStyle.of(listName+""))
    }

    //todo 2、判断为第一个TabContent时增加拖拽事件
    else if(index == 0){
      TabContent () {
        List({ space: 10, scroller: this.scrollerForList }) {
          ForEach(this.listArr, (item: number) => {
            ListItem () {
              Text(listName + item)
                .width('100%')
                .height('100%')
                .borderRadius($r('app.float.list_item_radius'))
                .fontSize($r('app.float.middle_font_size'))
                .fontWeight(500)
                .padding({ left: $r('app.float.list_item_padding') })
                .backgroundColor(Color.White)
            }
          }, (item: string) => JSON.stringify(item))
        }
        .padding({
          left: $r('app.float.list_padding'),
          right: $r('app.float.list_padding')
        })
        .width('100%')
        .height('100%')
        .edgeEffect(EdgeEffect.None)
        .scrollBar(BarState.Off)
        .nestedScroll({
          scrollForward: NestedScrollMode.PARENT_FIRST,
          scrollBackward: NestedScrollMode.SELF_FIRST
        })
      }
      //todo 3、绑定手势动作
      .gesture(
        // 绑定拖动手势，向右，移动距离为5vp（默认）时触发
        PanGesture({direction:PanDirection.Right})
          .onActionStart(() => {
            if (this.currentIndexTop == 0) {
              this.currentIndexTop = 2
            } else {
              this.currentIndexTop--
            }
            this.currentIndexUnder=0
          })
      )
      .tabBar(SubTabBarStyle.of(listName+""))
    }

    else{
      TabContent () {
        List({ space: 10, scroller: this.scrollerForList }) {
          ForEach(this.listArr, (item: number) => {
            ListItem () {
              Text(listName + item)
                .width('100%')
                .height('100%')
                .borderRadius($r('app.float.list_item_radius'))
                .fontSize($r('app.float.middle_font_size'))
                .fontWeight(500)
                .padding({ left: $r('app.float.list_item_padding') })
                .backgroundColor(Color.White)
            }
          }, (item: string) => JSON.stringify(item))
        }
      }
      .tabBar(SubTabBarStyle.of(listName+""))
    }
  }

  build() {
    Column () {
      Scroll(this.scrollerForScroll) {
        Column () {
          Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.Center}){
            this.listBuilder('可用美团平台劵', 0)
            this.listBuilder('可用淘宝商家劵', 1)
            this.listBuilder('返现', 2)
          }
          Tabs({index:$$this.currentIndexUnder}) {
            this.listBuilder2('全部', 0)
            this.listBuilder2('商城劵', 1)
            this.listBuilder2('上海劵', 2)
            this.listBuilder2('天津劵', 3)
            this.listBuilder2('线下消费劵', 4)
          }
        }
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.start_window_background'))
  }
}