鸿蒙学习笔记十一：实现吸顶悬浮效果

效果图如下：

image.png

image.png

image.png

示例代码如下:

  private scroller: Scroller = new Scroller();
  @State private currentIndex: number = 0
  @State private homeTabs: Array<string> = new Array()

@Builder
  list() {
    List({ scroller: this.scroller }) {
      ListItem() {
        //上滑时需要折叠的部分
        this.topScroll() 
      }
      
      //需要悬浮的tab
      ListItem() {
        Tabs({ index: this.currentIndex }) {
          ForEach(this.homeTabs, (tabBO: string, index) => {
            TabContent() {
              //tab对应的内容页
              this.tabContent(tabBO)
            }
            .tabBar(this.tabBuilder(tabBO.tabName, index))
          })
        }
        .barWidth(Dimens.dimen(285))
        .barHeight(Dimens.dimen(55))
        .barBackgroundColor(Colors.transparent)
        .backgroundColor(Colors.transparent)
        .barMode(BarMode.Fixed)
        .scrollable(false) //禁止滑动，因为滑动的时候顶部tab的切换会滞后，并且滑动到艺术品之后还能左滑
        .onChange((index) => {
          this.currentIndex = index
        })
      }
    }
    .edgeEffect(EdgeEffect.None)
    .scrollBar(BarState.Off)
    .width('100%')
    .height('100%')
  }


  @Builder
  tabBuilder(title: string, index: number) {
    //TabBtn是我们自己自定义的组件，可以先替换成Text()尝试
    TabBtn({
      text: title,
      selectStatus: this.currentIndex == index,
      scene: KButtonScene.PRIMARY,
      focusEnhance: true,
      optionWidth: 'auto',
      btnClick: () => {
        this.currentIndex = index
        this.isScrollToTop = !this.isScrollToTop
      }
    })
      .padding({ left: 10, right: 10 })
  }