鸿蒙ArkTs如何用Scroll容器或List组件实现吸顶效果

@Entry
@Component
struct Index {
    //悬停View
    @Builder
    CustomHeader() {
        Text('2222222')
            .height(30)
            .backgroundColor(Color.Gray)
            .width('100%')
    }
    build() {
        List({space: 10) {
            ListItem() {
                Text('111111')
                    .height(30)
                    .backgroundColor(Color.Gray)
                    .width('100%')
            }
            ListItemGroup({
                header: this.CustomHeader,
                space: 10
            }) {
                ForEach(Array.from({length: 20}), (item: void, index: number) => {
                    ListItem() {
                        Text(index + '')
                            .height(30)
                            .backgroundColor('#f00')
                            .width('100%')
                    }
                })
            }
        }
        .width('100%')
        .height(200)
        .sticky(StickyStyle.Header)
    }
}
export default Index

原文链接

还有一个方法利用List实现：

List({ space: 10 }) {
        //如果头部有不需要悬停的内容可以加在这里
        //PostDetailHeaderView({
         // entity: this.entity
        //})
         // .width('100%')

        ListItemGroup({
          //悬停部分,类似tab
          header: this.CustomHeader(),
          space: 10
        }) {
          ListItem() {
            //类似viewPager
            Swiper() {
              ForEach(this.arr, (item) => {
                Text('' + item).width('100%').height('100%').textAlign(TextAlign.Center).fontSize(30)
              }, item => item)
            }
            .index(this.currentIndex)
            .autoPlay(false)
            .indicator(false) // 默认开启指示点
            .loop(false) // 默认开启循环播放
            .vertical(false) // 默认横向切换
            .itemSpace(0)
            .onChange((index: number) => {
              this.currentIndex = index

              this.scroller.scrollTo({ xOffset: this.currentIndex * this.currentIndex * 5, yOffset: 0, animation: {
                duration: 500,
                curve: Curve.EaseInOut
              } })
            })
          }
          .backgroundColor(Color.Green)
        }
      }.width('100%')
      .height('100%')
      .sticky(StickyStyle.Header)
      .layoutWeight(1)

CustomHeader:

  CustomHeader() {
    Row() {
      ForEach(this.listTitle, (item, index) => {
        Column() {
          Text(item.name)
            .fontSize(14)
            .fontColor(this.currentIndex == index ? $r('app.color.color_7559FE') : $r('app.color.color_B3B3B3'))
            .padding({ top: 3, bottom: 5 })
            .height('100%')
            .width('100%')
            .textAlign(TextAlign.Center)
            .onClick(() => {
              this.currentIndex = index
            })
          Divider()
            .strokeWidth(2)
            .width(20)
            .color($r('app.color.color_7559FE'))
            .opacity(this.currentIndex === index ? 1 : 0)
        }
        .width('50%')
        .height('100%')
        .backgroundColor(Color.White)
        .justifyContent(FlexAlign.Center)
        .onClick(() => {
          this.currentIndex = index
        })
      })
    }
    .width('100%')
    .height(this.tabHeight)
  }