tabs结合scroll实现吸顶效果

// xxx.ets 
@Entry 
@Component 
struct ListExample { 
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
  @State totalScrollOffset: number = 0; 
  private tabArray: number[] = [0, 1, 2] 
  @State focusIndex: number = 0; 
  private controller: TabsController = new TabsController() 
  
  @Builder 
  myScroll() { 
    Scroll() { 
      Row() { 
        ForEach(this.tabArray, (item: number, index: number) => { 
          Row({ space: 20 }) { 
            Text('页签' + item) 
              .fontWeight(index === this.focusIndex ? FontWeight.Bold : FontWeight.Normal) 
          } 
          .padding({ left: '10fp', right: '10fp' }) 
          .onClick(() => { 
            this.controller.changeIndex(index) 
            this.focusIndex = index 
          }) 
        }) 
      } 
    } 
    .align(Alignment.Start) 
    .scrollable(ScrollDirection.Horizontal) 
    .scrollBar(BarState.Off) 
    .width('100%') 
  } 
  
  build() { 
    Column() { 
      List({ space: 20, initialIndex: 0 }) { 
          ForEach(this.arr, (item: number) => { 
            ListItem() { 
              Text('' + item) 
                .width('100%') 
                .height(100) 
                .fontSize(16) 
                .textAlign(TextAlign.Center) 
                .borderRadius(10) 
                .backgroundColor(0xFFFFFF) 
            } 
          }, (item: string) => item) 
        ListItemGroup({ header:this.myScroll() }) { 
          ListItem() { 
            //tabs组件把tabbar隐藏 
            Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 
              ForEach(this.tabArray, (item: number, index: number) => { 
                TabContent() { 
                  Text('我是页面 ' + item + " 的内容") 
                    .fontSize(30) 
                } 
              }) 
            } 
            .barHeight(20) 
          } 
        } 
      } 
      .sticky(StickyStyle.Header) 
      .listDirection(Axis.Vertical) // 排列方向 
      .scrollBar(BarState.Off) 
      .friction(0.6) 
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 
      .edgeEffect(EdgeEffect.None) 
      .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => { 
        console.info('first' + firstIndex) 
        console.info('last' + lastIndex) 
        console.info('center' + centerIndex) 
      }) 
      .onScroll((scrollOffset: number, scrollState: ScrollState) => { 
        console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset) 
        this.totalScrollOffset += scrollOffset 
        console.log('yeyouzhi>>>' + this.totalScrollOffset) 
      }) 
      .width('90%') 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xDCDCDC) 
    .padding({ top: 5 }) 
  
  } 
}