HarmonyOS 悬浮置顶功能

示例参考如下：

@Entry
@Component
struct Page {
  @State arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  @State currentIndex: number = 0
  private tabController: TabsController = new TabsController()
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State topHeight: number = 0
  @State isShow: boolean = false
  build() {
    Scroll() {
      Column() {
        // 顶部卡片
        Stack({ alignContent: Alignment.Bottom }) {
          Row() {
            Text('背景卡片').fontSize(20).layoutWeight(1)
          }
          .align(Alignment.Top)
          .borderRadius(5)
          .height("100%")

          // 待显示的
          Column() {
            TextInput({ text: '', placeholder: '请输入' })
              .placeholderColor(Color.White)
          }
          .visibility(this.isShow ? Visibility.Visible : Visibility.Hidden)
          .width('100%')
          .height(45)
          .backgroundColor('#333333')
          .onSizeChange((old, newV) => {
            this.topHeight = Number(newV.height)
          })
        }
        .height(150)
        .backgroundColor('#ffcae9ca')

        // tab内容
        Column() {
          Tabs({ barPosition: BarPosition.Start, controller: this.tabController }) {
            TabContent() {
              this.listControllerBuilder()
            }.tabBar(this.tabBuilder(0, '手机'))

            TabContent() {
              this.listControllerBuilder()
            }.tabBar(this.tabBuilder(1, '宽带'))

            TabContent() {
              this.listControllerBuilder()
            }.tabBar(this.tabBuilder(2, '家庭'))

            TabContent() {
              this.listControllerBuilder()
            }.tabBar(this.tabBuilder(3, '附近'))
          }
          .vertical(false)
          .barMode(BarMode.Fixed)
          .backgroundColor('#F1F3F5')
          .animationDuration(400)
          .onChange((index: number) => {
            this.currentIndex = index
          })
        }
        .width('100%')
        .height(`calc(100% - ${this.topHeight}vp)`)
      }
    }
    .onScrollEdge((edg) => {
      if (edg === 2) {
        this.isShow = true
      }
    })
    .onWillScroll((x, y) => {
      if (y !== 0) {
        this.isShow = false
      }
    })
  }

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
    }.width('100%')
  }

  @Builder
  listControllerBuilder() {
    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)
    }
    .listDirection(Axis.Vertical) // 排列方向
    .scrollBar(BarState.Off)
    .friction(0.6)
    .chainAnimation(false)
    .edgeEffect(EdgeEffect.Spring) //配合EdgeEffect.Spring可以触发list回弹效果
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })
    .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
    })
    .onAppear(() => {
    })
    .width('90%')
  }
}