HarmonyOS 鸿蒙Next PullToRefresh中customLoad自定义下拉动画为什么一直展示在页面?

HarmonyOS 鸿蒙Next PullToRefresh中customLoad自定义下拉动画为什么一直展示在页面? 今天在使用下拉加载的时候,发现customLoad这个属性是一个Builder,如果内容是纯文本就正常,只有上拉的时候才展示。

如果添加Image组件或者apng动图的时候,这个上拉加载的动画就会一直展示在页面的底部。

代码如下,大家把icon_float这个图片替换一下,就可以复现这个问题了!请问有什么解决办法吗?

import { PullToRefresh, PullToRefreshConfigurator } from '@ohos/pulltorefresh';

@Entry
@Component
struct CustomLoadAnim {
  private scroller: Scroller = new Scroller();
  private refreshConfigurator: PullToRefreshConfigurator = new PullToRefreshConfigurator()
  @State dataArr: string[] = ['我的评论', '与我相关', '个人中心1', '我的发布', '设置', '退出登录']

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Column() {
        PullToRefresh({
          data: $dataArr,
          scroller: this.scroller,
          customList: () => {
            this.getDisStockListView();
          },
          onRefresh: () => {
            return new Promise<(resolve, reject) => {
              resolve("")
            });
          },
          onLoadMore: () => {
            return new Promise<(resolve, reject) => {
              if (this.dataArr.length < 10) {
                setTimeout(() => {
                  this.dataArr.push("增加的条目" + this.dataArr.length);
                }, 2000);
                this.refreshConfigurator.setHasLoadMore(true)
              } else {
                // 如果请求的result是空的,就禁用下拉加载
                this.refreshConfigurator.setHasLoadMore(false)
              }
              resolve("")
            })
          },
          customLoad: customLoadAnimation,
          customRefresh: undefined,
          onAnimPullUp: undefined,
          refreshConfigurator: this.refreshConfigurator
        })
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#ffffff')
      .align(Alignment.Top)

    }.width('100%').height('100%').backgroundColor('#C0C0C0')
  }

  @Builder
  private getDisStockListView() {
    List({ scroller: this.scroller }) {
      ForEach(this.dataArr, (item: string, index: number) {
        ListItem() {
          Column() {
            Text(item).width('100%').layoutWeight(1)
            Divider().width('100%').height(5).backgroundColor('#ff5500')
          }.width('100%').height(200)
        }
      })
    }
    .width('100%')
    .height('100%')
    .zIndex(1)
    .backgroundColor('#F3F5F7')
    .edgeEffect(EdgeEffect.None)
    .scrollBar(BarState.Off)
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })
  }
}

@Builder
export function customLoadAnimation() {
  Row() {
    Text('上拉加载')
    Image($r('app.media.icon_float')).width(50).height(50)
  }.width(`100%`)
}
4 回复

把pulltorefresh这个库从2.0.5更新到2.0.6

更多关于HarmonyOS 鸿蒙Next PullToRefresh中customLoad自定义下拉动画为什么一直展示在页面?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你要在数据拉取结束的地方给组件的refreshing属性设为false。

瞅瞅文档下的示例:Refresh-滚动与滑动-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者 (huawei.com)

在HarmonyOS鸿蒙Next中,PullToRefresh组件的customLoad自定义下拉动画一直展示在页面上的原因可能是由于动画的状态未被正确更新或回调函数未正确触发。customLoad动画的显示与隐藏通常依赖于PullToRefresh组件的状态管理,包括下拉刷新开始、刷新中、刷新完成等状态。如果动画一直展示,可能是因为刷新状态未正确切换到“完成”状态,或者customLoad动画的逻辑未在刷新完成后执行隐藏操作。检查PullToRefresh组件的状态回调函数,确保在刷新完成后调用相关方法以隐藏动画。此外,确认customLoad动画的实现逻辑是否正确处理了状态切换。

在HarmonyOS鸿蒙Next中,PullToRefresh组件的customLoad自定义下拉动画一直展示在页面,可能是由于以下原因:

  1. 动画未正确结束:确保在数据加载完成后调用finishRefresh()方法,以结束动画。
  2. 状态未更新:检查是否在加载完成后更新了组件的状态,确保动画状态被正确重置。
  3. 布局问题:确认自定义动画的布局设置是否正确,避免动画视图被错误地固定在页面上。

建议检查相关代码逻辑,确保动画在适当的时候开始和结束。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!