HarmonyOS 关于Scroll和List嵌套滚动的悬停问题？

Question

我想实现的功能是，Scroll Area 滚动到一半就悬停，但是嵌套的List 并不能滚动到底部（item 28,item 29 被藏住了），有什么办法让下面List的内容能完全的显示出来。代码如下：

@Entry
@Component
struct StickyNestedScroll {
  @State arr: number[] = []
  private stop:boolean = true
  private scroller = new Scroller()
  @Styles
  listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }

  build() {
    Scroll(this.scroller) {
      Column() {
        Text("Scroll Area")
          .width("100%")
          .height("40%")
          .backgroundColor('#0080DC')
          .textAlign(TextAlign.Center)
          .onAreaChange((_, newValue) => {
            if ( newValue.globalPosition.y && newValue.height) {
              if (Math.abs(newValue.globalPosition.y as number) >=  (newValue.height as number)/2) {
                this.stop = true
              }else {
                this.stop = false
              }
            }else {
              this.stop = false
            }
          })
        Tabs({ barPosition: BarPosition.Start }) {
          TabContent() {
            List({ space: 10 }) {
              ForEach(this.arr, (item: number) => {
                ListItem() {
                  Text("item" + item)
                    .fontSize(16)
                }.listCard()
              }, (item: string) => item)
            }.width("100%")
            .edgeEffect(EdgeEffect.Spring)
            .nestedScroll({
              scrollForward: NestedScrollMode.PARENT_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
          }.tabBar("Tab1")

          TabContent() {
          }.tabBar("Tab2")
        }
        .vertical(false)
        .height("100%")
      }.width("100%")
    }
    .onScrollFrameBegin((offset: number) => {
      if (!this.stop) return { offsetRemain: offset };
      if (offset <= 0) return { offsetRemain: offset }
      return {
        offsetRemain: 0
      }
    })
    .edgeEffect(EdgeEffect.Spring)
    .friction(0.6)
    .backgroundColor('#DCDCDC')
    .scrollBar(BarState.Off)
    .width('100%')
    .height('100%')
  }

  aboutToAppear() {
    for (let i = 0; i < 30; i++) {
      this.arr.push(i)
    }
  }
}

Answer 1

Tabs部分可以尝试修改为以下代码

Tabs({ barPosition: BarPosition.Start }) {
  TabContent() {
    List({ space: 10 }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text("item" + item)
            .fontSize(16)
        }.listCard()
      }, (item: string) => item)
    }.width("100%")
    .edgeEffect(EdgeEffect.Spring)
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })
  }.tabBar("Tab1")

  TabContent() {
  }.tabBar("Tab2")
}
.vertical(false)
.height("80%")

将高度设置为80%

根因为写100%的话，滑动后加上上面text部分，总高则为120%，超出了屏幕展示区域；原本text设置的40%，滑动一半为20%，下面tabs就只能占高为80%。