鸿蒙实现吸顶效果

用 ListItemGroup 的自定义组头 设置 list的 sticky(StickyStyle.Header) 就行了

@Entry
@Component
struct Second {
  @State list: number[] = []

  aboutToAppear() {//添加测试数据
    for (let i = 0; i < 30; i++) {
      this.list.push(i)
    }
  }

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

 用ListItemGroup 的自定义组头
 
 
 
 @Builder
  TabBuilder(title: string) {
    Column() {
      Text(title)
        .fontSize(20)
        .fontColor(Color.White)
    }
    .padding({ top: 10, bottom: 10 })
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Pink)
    .height(150)
    .width('100%')
  }

  build() {
    Column() {
      List({ space: 0 }) {
        ListItem() {
          Text("头部滚动区域")
            .width("100%")
            .height("30%")
            .fontSize(20)
            .fontColor(Color.White)
            .backgroundColor('#0080DC')
            .textAlign(TextAlign.Center)
        }
        ListItemGroup(
          {
            space:10,
            header: this.TabBuilder("我是吸顶布局")
          }
        ){

          ForEach(this.list, (item: number) => {
            ListItem() {
              Text("item" + item).fontSize(16)
            }.listStyle()
          }, (item: string) => item)
        }
      }.width("100%")
      .height('100%')
      .edgeEffect(EdgeEffect.None)
      .sticky(StickyStyle.Header)

    }.width("100%")
    .backgroundColor('#DCDCDC')
    .width('100%')
    .height('100%')
  }
}

效果图如下