HarmonyOS6 ArkTS Refresh实现下拉刷新上拉加载

文章目录概述核心API与组件1. Refresh 组件下拉刷新核心2. List 组件上拉加载核心3. 自定义构建器Builder完整代码核心逻辑1. 自定义下拉刷新Refresh builder2. 上拉加载更多List 底部布局3. 状态管理State变量交互流程说明下拉刷新流程上拉加载流程总结概述在HarmonyOS6开发中列表页面最常用的下拉刷新 上拉加载更多功能组合下拉刷新使用Refresh组件 自定义builder刷新布局实现环形进度条加载动画。上拉加载更多基于List滚动监听 底部ListItem加载布局实现触底自动加载。状态联动通过State状态变量管理刷新、加载、进度、显隐等逻辑。核心API与组件1. Refresh 组件下拉刷新核心参数/属性作用refreshing: $$this.refreshing双向绑定刷新状态控制刷新开始/结束builder: this.refreshBuilder()自定义刷新布局替换系统默认样式onRefreshing()进入刷新状态时触发执行数据刷新逻辑onStateChange()监听刷新状态闲置/下拉/过载/刷新/完成onOffsetChange()监听下拉偏移量用于同步进度条值2. List 组件上拉加载核心方法/属性作用onScrollIndex()监听列表可见区域首尾部索引判断是否触底edgeEffect开启弹簧边缘效果提升滑动体验scrollBar(BarState.Off)关闭系统滚动条3. 自定义构建器BuilderrefreshBuilder()自定义下拉刷新头部包含环形进度条。footer()自定义上拉加载底部包含加载动画与提示文本。完整代码// xxx.ets Entry Component struct ListRefreshLoad { State arr: Arraynumber [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; State refreshing: boolean false; State refreshOffset: number 0; State refreshState: RefreshStatus RefreshStatus.Inactive; State isLoading: boolean false; Builder refreshBuilder() { Stack({ alignContent: Alignment.Bottom }) { // 可以通过刷新状态控制是否存在Progress组件。 // 当刷新状态处于下拉中或刷新中状态时Progress组件才存在。 if (this.refreshState ! RefreshStatus.Inactive this.refreshState ! RefreshStatus.Done) { Progress({ value: this.refreshOffset, total: 64, type: ProgressType.Ring }) .width(32).height(32) .style({ status: this.refreshing ? ProgressStatus.LOADING : ProgressStatus.PROGRESSING }) .margin(10) } } .clip(true) .height(100%) .width(100%) } Builder footer() { Row() { LoadingProgress().height(32).width(48) Text(加载中) }.width(100%) .height(64) .justifyContent(FlexAlign.Center) // 当不处于加载中状态时隐藏组件。 .visibility(this.isLoading ? Visibility.Visible : Visibility.Hidden) } build() { Refresh({ refreshing: $$this.refreshing, builder: this.refreshBuilder() }) { List() { ForEach(this.arr, (item: number) { ListItem() { Text( item) .width(100%) .height(80) .fontSize(16) .textAlign(TextAlign.Center) .backgroundColor(0xFFFFFF) }.borderWidth(1) }, (item: string) item) ListItem() { this.footer(); } } .onScrollIndex((start: number, end: number) { // 当达到列表末尾时触发新数据加载。 if (end this.arr.length - 1) { this.isLoading true; // 模拟新数据加载。 setTimeout(() { for (let i 0; i 10; i) { this.arr.push(this.arr.length); } this.isLoading false; }, 700) } }) .scrollBar(BarState.Off) // 开启边缘滑动效果。 .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true }) } .width(100%) .height(100%) .backgroundColor(0xDCDCDC) .onOffsetChange((offset: number) { this.refreshOffset offset; }) .onStateChange((state: RefreshStatus) { this.refreshState state; }) .onRefreshing(() { // 模拟数据刷新。 setTimeout(() { this.refreshing false; }, 2000) }) } }运行效果当上滑的时候核心逻辑1. 自定义下拉刷新Refresh builder使用Builder装饰器定义refreshBuilder自定义刷新布局。通过refreshState状态控制进度条显示/隐藏。通过offset偏移量同步进度条数值实现下拉进度联动。刷新完成后自动将refreshing置为false关闭动画。2. 上拉加载更多List 底部布局在List尾部添加ListItem作为加载底部。通过onScrollIndex监听列表滚动位置判断是否触底。触底时显示footer布局执行数据加载。加载完成后隐藏底部布局更新列表数据。3. 状态管理State变量refreshing控制下拉刷新状态。refreshState记录当前刷新阶段。refreshOffset同步下拉偏移量。isLoading控制上拉加载底部显示/隐藏。arr列表数据源。交互流程说明下拉刷新流程页面下拉 → 触发onOffsetChange更新偏移量。达到阈值 → 状态变为OverDrag。松手 → 进入Refresh状态 → 触发onRefreshing。加载2秒 →refreshing false→ 刷新完成。上拉加载流程列表上拉滚动到底部 →onScrollIndex监听末尾索引。自动触发加载 →isLoading true→ 显示底部加载布局。加载700毫秒 → 追加10条数据 →isLoading false→ 隐藏底部。总结该示例是HarmonyOS6中列表下拉刷新 上拉加载更多的标准官方实现方案使用Refreshbuilder实现高度自定义下拉刷新。使用ListonScrollIndex实现上拉加载更多。状态管理清晰、交互流畅、UI美观、符合官方最佳实践。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力