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)

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

HarmonyOS
2025-01-09 16:51:26
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以监听手指按下事件,记录其初始位置的值。 监听手指按压移动事件,记录并计算当前移动的位置与初始值的差值,大于0表示向下移动,同时设置一个允许移动的最大值。监听手指抬起事件,若此时移动达到最大值,则触发数据加载并显示刷新视图,加载完成后将此视图隐藏。可参考官方示例demo:https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-NewsDataArkTS

分享
微博
QQ
微信
回复
2025-01-09 18:42:25
相关问题
HarmonyOS 下拉刷新,加载功能
241浏览 • 1回复 待解决
HarmonyOS 加载更多
225浏览 • 1回复 待解决
HarmonyOS swiper实现加载更多
207浏览 • 1回复 待解决
HarmonyOS 下拉刷新,加载示例
322浏览 • 1回复 待解决
加载,下拉刷新组件
794浏览 • 1回复 待解决
HarmonyOS 自定义相机功能
539浏览 • 1回复 待解决
HarmonyOS 自定义拍照功能
363浏览 • 1回复 待解决
HarmonyOS 如何制作自定义加载弹窗
795浏览 • 1回复 待解决
HarmonyOS 关于自定义相机功能
597浏览 • 1回复 待解决
HarmonyOS ArkUI加载自定义组件
718浏览 • 1回复 待解决
如何使用和加载自定义字体
2619浏览 • 1回复 待解决
HarmonyOS 地图自定义气泡功能
307浏览 • 1回复 待解决
加载页面的时候如何自定义header
1165浏览 • 1回复 待解决