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%`)
}
把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
动画的实现逻辑是否正确处理了状态切换。