HarmonyOS7 下拉刷新与上拉加载：列表交互闭环案例

文章目录前言下拉刷新Refresh 组件代码实现上拉加载onReachEnd核心代码加载更多的小菊花完整示例完整闭环逻辑常见误区小白必踩完整可运行示例下拉刷新 上拉加载代码解析写在最后前言“下拉刷新最新、上拉加载更多”——这是信息流 app 的标准交互。看起来简单但新手常卡在怎么触发“数据怎么接”。这篇文章用一个新闻列表的完整案例把下拉刷新 上拉加载做成闭环下拉从第一页重新拉上拉追加下一页。代码可直接套你的项目。下拉刷新Refresh 组件HarmonyOS 用Refresh包裹列表下拉就触发onRefreshing代码实现Localnews:NewsItem[][]Localrefreshing:booleanfalsebuild(){Refresh({refreshing:$$this.refreshing,builder:this.refreshTip()}){List(){ForEach(this.news,(n){ListItem(){NewsRow({item:n})}},(n)n.id)}}.onRefreshing(async(){awaitthis.loadFirstPage()// 拉第一页this.refreshingfalse// 关闭刷新动画})}讲解Refresh第一个参数是刷新状态$$this.refreshing是双向绑定true时显示加载圈。.onRefreshing(...)用户下拉松手后触发在这里拉最新数据。拉完务必把refreshing设回false否则圈一直转。坑onRefreshing是异步的记得await拉完再关refreshing不然动画提前结束。上拉加载onReachEnd列表滚到底部时用onReachEnd触发加载更多核心代码List(){// ...}.onReachEnd(async(){if(this.loading||this.noMore)return// 防重复 到底判断this.loadingtrueconstnextawaitthis.loadNextPage()this.newsthis.news.concat(next)// 追加不替换this.loadingfalseif(next.length0)this.noMoretrue})要点onReachEnd在列表触底时触发。this.news.concat(next)追加新数据不是覆盖否则前面的丢了。loading防重复触发触底可能连发多次noMore标记没有更多了避免无限请求。加载更多的小菊花底部加个加载中提示完整示例ListItem(){if(this.loading){Row(){LoadingProgress().width(24).height(24);Text(加载中...)}.justifyContent(FlexAlign.Center).width(100%).padding(12)}}LoadingProgress是系统自带的小转圈配合加载中文字体验完整。完整闭环逻辑交互触发行为下拉onRefreshing拉第 1 页替换全部上拉触底onReachEnd拉下一页追加到底noMoretrue停止请求显示没有更多常见误区小白必踩误区说明onRefreshing不await就关 refreshing拉取是异步的没等完就关加载圈提前消失。上拉用替换不用追加this.news next替换会把前面丢光要用concat追加。不防重复请求onReachEnd触底可能连发用loading标志拦住到底用noMore停止。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例下拉刷新 上拉加载给列表加上完整的「刷新 / 加载更多」闭环。代码解析// List 的刷新与加载更多EntryComponentstruct FeedList{Statedata:number[][1,2,3]Stateloading:booleanfalseloadMore(){if(this.loading)returnthis.loadingtruesetTimeout((){// 模拟请求conststartthis.data.length1for(letistart;istart3;i){this.data.push(i)}this.loadingfalse},800)}build(){List(){ForEach(this.data,(n:number){ListItem(){Text(条目 n).padding(16)}})}.onReachEnd((){this.loadMore()})// 滚到底触发加载}}你会看到什么列表滚到底部自动追加 3 条新数据带 800ms 加载感。配合Refresh组件还能做顶部下拉刷新形成完整列表交互。动手改一改用Refresh({ refreshing: $$this.loading })包裹 List 做下拉刷新。在loadMore里返回空数组显示「没有更多了」状态。用LazyForEach替换ForEach支撑更大列表。写在最后下拉刷新 上拉加载的闭环核心就三句话Refresh 管下拉重拉第一页、onReachEnd 管上拉追加、用 loading/noMore 防重复和越界。把这套直接套进你的列表页用户一拉一滚就能翻完所有内容——信息流 app 的体感就是这么来的。记得刷新用替换、加载用追加方向别搞反。