HarmonyOS Tabs组件嵌套滑动

//xxx.index  
import { CommonConstants } from '../common/constants/CommonConstants';  
@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 listArr1: number[] = [1, 2, 3, 4, 5, 6, 7, 8];  
  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, tabName: string, index: number) {  
    TabContent() {  
      Scroll(){  
        Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Start}){  
          List({ space: CommonConstants.LIST_SPACE, scroller: this.scrollerForList }) {  
            ForEach(this.listArr1, (item: number) => {  
              ListItem() {  
                Text(listName + item)  
                  .width(CommonConstants.FULL_WIDTH)  
                  .height(CommonConstants.FULL_HEIGHT)  
                  .borderRadius($r('app.float.list_item_radius'))  
                  .fontSize($r('app.float.middle_font_size'))  
                  .fontWeight(CommonConstants.FONT_WEIGHT_FIVE)  
                  .padding({ left: $r('app.float.list_item_padding') })  
                  .backgroundColor(Color.White)  
              }  
              .width(CommonConstants.FULL_WIDTH)  
              .height($r('app.float.list_item_height'))  
            }, (item: string) => JSON.stringify(item))  
          }  
          .padding({  
            left: $r('app.float.list_padding'),  
            right: $r('app.float.list_padding')  
          })  
          .width(CommonConstants.FULL_WIDTH)  
          .edgeEffect(EdgeEffect.None)  
          .scrollBar(BarState.Off)  
          .nestedScroll({  
            scrollForward: NestedScrollMode.SELF_FIRST,  
            scrollBackward: NestedScrollMode.SELF_FIRST  
          })  
          //todo 1、设置子tabs，并增加参数判断是否为最后一个TabContent  
          Tabs({index:$$this.currentIndexUnder}) {  
            this.listBuilder2(listName+'b', tabName, index, false)  
            this.listBuilder2(listName+'b', tabName, index, true)  
          }  
        }  
      }  
    }  
    .tabBar(SubTabBarStyle.of(listName+""))  
  }  
  //第四个参数，自主标记是否为最后一个  
  @Builder  
  listBuilder2(listName: string, tabName: string, index: number, boo:boolean){  
    //todo 2、判断为最后一个TabContent时增加拖拽事件  
    if(boo){  
      TabContent() {  
        List({ space: CommonConstants.LIST_SPACE, scroller: this.scrollerForList }) {  
          ForEach(this.listArr, (item: number) => {  
            ListItem() {  
              Text(listName + item)  
                .width(CommonConstants.FULL_WIDTH)  
                .height(CommonConstants.FULL_HEIGHT)  
                .borderRadius($r('app.float.list_item_radius'))  
                .fontSize($r('app.float.middle_font_size'))  
                .fontWeight(CommonConstants.FONT_WEIGHT_FIVE)  
                .padding({ left: $r('app.float.list_item_padding') })  
                .backgroundColor(Color.White)  
            }  
            .width(CommonConstants.FULL_WIDTH)  
            .height($r('app.float.list_item_height'))  
          }, (item: string) => JSON.stringify(item))  
        }  
        .padding({  
          left: $r('app.float.list_padding'),  
          right: $r('app.float.list_padding')  
        })  
        .width(CommonConstants.FULL_WIDTH)  
        .height(CommonConstants.FULL_HEIGHT)  
        .edgeEffect(EdgeEffect.None)  
        .scrollBar(BarState.Off)  
        .nestedScroll({  
          scrollForward: NestedScrollMode.PARENT_FIRST,  
          scrollBackward: NestedScrollMode.SELF_FIRST  
        })  
      }  
      //todo 3、绑定手势动作  
      .gesture(  
        // 绑定拖动手势，向右，移动距离为5vp（默认）时触发  
     PanGesture({direction:PanDirection.Left})  
          .onActionStart(() => {  
            this.currentIndexTop++  
            this.currentIndexUnder=0  
          })  
      )  
      .tabBar(SubTabBarStyle.of(listName+""))  
    }else{  
      TabContent() {  
        List({ space: CommonConstants.LIST_SPACE, scroller: this.scrollerForList }) {  
          ForEach(this.listArr, (item: number) => {  
            ListItem() {  
              Text(listName + item)  
                .width(CommonConstants.FULL_WIDTH)  
                .height(CommonConstants.FULL_HEIGHT)  
                .borderRadius($r('app.float.list_item_radius'))  
                .fontSize($r('app.float.middle_font_size'))  
                .fontWeight(CommonConstants.FONT_WEIGHT_FIVE)  
                .padding({ left: $r('app.float.list_item_padding') })  
                .backgroundColor(Color.White)  
            }  
            .width(CommonConstants.FULL_WIDTH)  
            .height($r('app.float.list_item_height'))  
          }, (item: string) => JSON.stringify(item))  
        }  
        .padding({  
          left: $r('app.float.list_padding'),  
          right: $r('app.float.list_padding')  
        })  
        .width(CommonConstants.FULL_WIDTH)  
        .height(CommonConstants.FULL_HEIGHT)  
        .edgeEffect(EdgeEffect.None)  
        .scrollBar(BarState.Off)  
        .nestedScroll({  
          scrollForward: NestedScrollMode.PARENT_FIRST,  
          scrollBackward: NestedScrollMode.SELF_FIRST  
        })  
      }  
      .tabBar(SubTabBarStyle.of(listName+""))  
    }  
  }  
  build() {  
    Column() {  
      Text($r('app.string.title'))  
        .fontWeight(FontWeight.Bold)  
        .fontSize($r('app.float.big_font_size'))  
        .height($r('app.float.list_item_height'))  
        .textAlign(TextAlign.Start)  
        .width(CommonConstants.FULL_WIDTH)  
        .padding({  
          left: $r('app.float.discover_left_padding'),  
          bottom: $r('app.float.discover_bottom_padding'),  
          top: $r('app.float.discover_top_padding')  
        })  
        .onClick(()=>{  
          this.currentIndexTop++  
        })  
      Scroll(this.scrollerForScroll) {  
        Column() {  
          //外层父tabs  
          Tabs({index:$$this.currentIndexTop}) {  
            this.listBuilder(CommonConstants.LIST_NAME_1, CommonConstants.TAB_NAME_1, 0)  
            this.listBuilder(CommonConstants.LIST_NAME_2, CommonConstants.TAB_NAME_2, 1)  
          }  
          .barWidth($r('app.float.bar_width'))  
        }  
      }  
      .width(CommonConstants.FULL_WIDTH)  
      .height(CommonConstants.STACK_HEIGHT)  
    }  
    .height(CommonConstants.FULL_HEIGHT)  
    .backgroundColor($r('app.color.start_window_background'))  
  }  
}
//float.json  
{  
  "float": [  
    {  
      "name": "middle_font_size",  
      "value": "16fp"  
    },  
    {  
      "name": "title_line_height",  
      "value": "22vp"  
    },  
    {  
      "name": "title_margin_top",  
      "value": "10vp"  
    },  
    {  
      "name": "title_margin_bottom",  
      "value": "5vp"  
    },  
    {  
      "name": "divider_width",  
      "value": "64vp"  
    },  
    {  
      "name": "list_item_radius",  
      "value": "24vp"  
    },  
    {  
      "name": "list_item_padding",  
      "value": "12vp"  
    },  
    {  
      "name": "list_padding",  
      "value": "10vp"  
    },  
    {  
      "name": "list_item_height",  
      "value": "56vp"  
    },  
    {  
      "name": "big_font_size",  
      "value": "30fp"  
    }