HarmonyOS鸿蒙Next中Scroll嵌套List时滑动到底部添加数据内容区域未变化问题

HarmonyOS鸿蒙Next中Scroll嵌套List时滑动到底部添加数据内容区域未变化问题

示例4嵌套滚动父组件向子组件传递滚动

图一	图二

Scroll嵌套List，当Scroll滑动到底部，这时候点击按钮向list添加了10条数据，但是Scroll的内容区没有发生改变还是图一的效果，但是我想要的是添加完数据后得到图二的效果。

@Entry
@Component
struct NestedScroll {
  private headerHeight: number = 0;
  @State arr: number[] = [];
  private scrollerForParent: Scroller = new Scroller();
  private scrollerForChild: Scroller = new Scroller();

  aboutToAppear(): void {
    this.arr = this.getData(0, 10)
  }

  getData(start: number, count: number): Array<number> {
    const arr: Array<number> = []
    for (let i = 0; i < count; i++) {
      arr.push(i + start)
    }
    return arr
  }

  build() {
    Column() {
      Button('添加数据')
        .onClick(() => {
          const items = this.getData(this.arr.length, 10)
          this.arr.push(...items)
        })
      Scroll(this.scrollerForParent) {
        Column() {
          Text("header")
            .width("100%")
            .height("40%")
            .backgroundColor(0X330000FF)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) => {
              this.headerHeight = newValue.height! as number;
            })
          List({ space: 20, scroller: this.scrollerForChild }) {
            ForEach(this.arr, (item: number) => {
              ListItem() {
                Text("ListItem" + item)
                  .width("100%")
                  .height("100%")
                  .borderRadius(15)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(Color.White)
              }.width("100%").height(100)
            }, (item: string) => item)
          }
          .width("100%")
          .height("100%")
          .edgeEffect(EdgeEffect.None)
          .scrollBar(BarState.Off)
          .enableScrollInteraction(false)

          Text("已经滑动到底部了")
            .width("100%")
            .height("10%")
            .backgroundColor(0X330000FF)
            .fontSize(16)
            .textAlign(TextAlign.Center)

        }
      }
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.Spring)
      .onScrollFrameBegin((offset: number, state: ScrollState) => {
        let retOffset = offset;
        let currOffset = this.scrollerForParent.currentOffset().yOffset;
        let newOffset = currOffset + offset;
        if (offset > 0) {
          if (this.scrollerForChild.isAtEnd()) {
            return { offsetRemain: offset };
          }
          if (newOffset > this.headerHeight) {
            retOffset = this.headerHeight - currOffset;
          }
          this.scrollerForChild.scrollBy(0, offset - retOffset);
        } else {
          if (this.scrollerForChild.currentOffset().yOffset <= 0) {
            return { offsetRemain: offset };
          }
          if (newOffset < this.headerHeight) {
            retOffset = this.headerHeight - currOffset;
          }
          this.scrollerForChild.scrollBy(0, offset - retOffset);
        }
        return { offsetRemain: retOffset };
      })
      .width("100%")
      .layoutWeight(1)
      .backgroundColor(0xDCDCDC)
    }
    .width("100%")
    .height("100%")
  }
}