HarmonyOS 如何自定义上拉加载功能

期望页面支持下拉放大背景图和上滑加载更多数据。

部分代码如下：

Refresh({ refreshing: $$this.isRefresh, offset: 0, builder: EmptyRefreshLoadingBuilder() }) {
  List({ scroller: this.listScroller }) {
    // 封面图，用于跟随页面向上滚动消失
    if (this.myModel!.userInfoData.cover_img_url) {
      ListItem() {
        Image(this.myModel!.userInfoData.cover_img_url)
          .size({ height: this.topRectHeight + 100, width: '100%' })
          .objectFit(ImageFit.Cover)// .margin(this.showScrollBgImage ? { top: -80 - 20 } : {})
          .margin({ top: -20 })
          .visibility(this.showScrollBgImage ? Visibility.Visible : Visibility.Hidden)
      }
    }

    ListItem() {
      UserInfoView({
        userInfo: this.myModel!.userInfoData,
        userSummary: this.myModel!.userSummaryData
      })
        .margin({ top: -45 })
      // .margin(this.showScrollBgImage ? { top: -20 } : {})
    }

    ListItem() {
      TabsView({
        model: this.myModel!,
      })
    }
  }
  .nestedScroll(this.myModel?.nestedScroll)
  .edgeEffect(EdgeEffect.None)
  .onScrollFrameBegin((offset) => {
    const yOffset: number = this.listScroller.currentOffset().yOffset;
    this.scrollYOffset = yOffset;
    return {
      offsetRemain: offset
    }
  })
  .onScrollStop(() => {
    const yOffset: number = this.listScroller.currentOffset().yOffset;
    this.scrollYOffset = yOffset;
  })
}
.height('100%')
.width('100%')
.onRefreshing(async () => {
  // 下拉不需要执行操作，直接关闭下拉状态
  this.isRefresh = false
})
.onOffsetChange((value: number) => {
  this.refreshYOffset = value;
})
.visibility(this.myModel!.loadingStatus === LoadingStatus.SUCCESS ? Visibility.Visible : Visibility.Hidden)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.

下拉放大背景图功能，通过Refresh的onOffsetChange事件实现了。但是上滑加载更多数据不知道怎么实现。尝试过使用@ohos/pulltorefresh和@abner/refresh，都无法满足需求。