HarmonyOS 鸿蒙Next 吸顶效果实现

参考demo：

@Entry
@Component
struct ScrollCeiling1 {
  scroller: Scroller = new Scroller()
  itemData: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  tabTitles: Array<string> = ['Tab1', 'Tab2', 'Tab3']

  // 创建Tabs组件单个tab下的内容组件，并设置TabContent组件内的List组件的nestedScroll属性，List组件的父组件为TabContent组件
  @Builder
  tabContentData(tabTitle: string) {
    TabContent() {
      List() {
        ForEach(this.itemData, (item: number) => {
          ListItem() {
            Text(`${ item }`).height(80).width('100%').textAlign(TextAlign.Center).backgroundColor(0xDDDDDD).margin({bottom: 5})
          }
        })
      }
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
    }.tabBar(tabTitle)
    .padding({top:5, bottom:5})
    .borderWidth(1)
    .borderColor(Color.Red)
  }

  /*
  设置scrollForward的滚动模式为NestedScrollMode.PARENT_FIRST：
  当控制List内元素向前滚动时，其父组件TabContent先滚动，覆盖Scroll组件嵌套的Column组件内的Image组件，随后Tabs组件触碰顶部边缘，触发边缘效果，从而固定在顶部
  设置scrollBackward的滚动模式为NestedScrollMode.SELF_FIRST：
  当控制List内元素向后滚动时，List的内容先滚动，直至滚动到List最顶部后，父组件TabContent开始滚动
  */

  build() {
    Scroll(this.scroller){
      Column() {
        Image($r('app.media.app_icon')).height(70)

        Tabs() {
          ForEach(this.tabTitles, (title: string) => {
            this.tabContentData(title)
          })
        }
        .borderWidth(2)
      }
      .width('90%')
      .alignItems(HorizontalAlign.Center)
    }
    .width('100%')
    .align(Alignment.Center)
    .scrollBar(BarState.Off)
  }
}