HarmonyOS tabbar吸顶？

Question

如题：HarmonyOS tabbar吸顶？

Answer 1

@Entry
@Component
struct Tabbar_Scroll {
  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()

  @Styles
  listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }

  @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)
                  List({ space: 10 }) {
                    ForEach(this.arr, (item: number) => {
                      ListItem() {
                        Text("item" + item)
                          .fontSize(16)
                      }.listCard()
                    }, (item: number) => item.toString())
                  }.width("100%")
                  .edgeEffect(EdgeEffect.Spring)
                  .nestedScroll({
                    scrollForward: NestedScrollMode.PARENT_FIRST,
                    scrollBackward: NestedScrollMode.SELF_FIRST
                  })
                }
                .height(15000)
              })
            }
            .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('tag>>>' + this.totalScrollOffset)
      })
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })

  }
}