🎯 核心任务
为开源鸿蒙跨平台工程的列表清单实现 上拉加载 (Infinite Scroll)、下拉刷新 (Pull-to-Refresh) 及 多场景数据加载提示 能力，确保交互逻辑闭环，并完成开源鸿蒙设备运行验证。
#mermaid-svg-7zDBlxEfFmYshPBg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-7zDBlxEfFmYshPBg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-7zDBlxEfFmYshPBg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-7zDBlxEfFmYshPBg .error-icon{fill:#552222;}#mermaid-svg-7zDBlxEfFmYshPBg .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-7zDBlxEfFmYshPBg .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-7zDBlxEfFmYshPBg .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-7zDBlxEfFmYshPBg .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-7zDBlxEfFmYshPBg .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-7zDBlxEfFmYshPBg .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-7zDBlxEfFmYshPBg .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-7zDBlxEfFmYshPBg .marker{fill:#333333;stroke:#333333;}#mermaid-svg-7zDBlxEfFmYshPBg .marker.cross{stroke:#333333;}#mermaid-svg-7zDBlxEfFmYshPBg svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-7zDBlxEfFmYshPBg p{margin:0;}#mermaid-svg-7zDBlxEfFmYshPBg .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-7zDBlxEfFmYshPBg .cluster-label text{fill:#333;}#mermaid-svg-7zDBlxEfFmYshPBg .cluster-label span{color:#333;}#mermaid-svg-7zDBlxEfFmYshPBg .cluster-label span p{background-color:transparent;}#mermaid-svg-7zDBlxEfFmYshPBg .label text,#mermaid-svg-7zDBlxEfFmYshPBg span{fill:#333;color:#333;}#mermaid-svg-7zDBlxEfFmYshPBg .node rect,#mermaid-svg-7zDBlxEfFmYshPBg .node circle,#mermaid-svg-7zDBlxEfFmYshPBg .node ellipse,#mermaid-svg-7zDBlxEfFmYshPBg .node polygon,#mermaid-svg-7zDBlxEfFmYshPBg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-7zDBlxEfFmYshPBg .rough-node .label text,#mermaid-svg-7zDBlxEfFmYshPBg .node .label text,#mermaid-svg-7zDBlxEfFmYshPBg .image-shape .label,#mermaid-svg-7zDBlxEfFmYshPBg .icon-shape .label{text-anchor:middle;}#mermaid-svg-7zDBlxEfFmYshPBg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-7zDBlxEfFmYshPBg .rough-node .label,#mermaid-svg-7zDBlxEfFmYshPBg .node .label,#mermaid-svg-7zDBlxEfFmYshPBg .image-shape .label,#mermaid-svg-7zDBlxEfFmYshPBg .icon-shape .label{text-align:center;}#mermaid-svg-7zDBlxEfFmYshPBg .node.clickable{cursor:pointer;}#mermaid-svg-7zDBlxEfFmYshPBg .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-7zDBlxEfFmYshPBg .arrowheadPath{fill:#333333;}#mermaid-svg-7zDBlxEfFmYshPBg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-7zDBlxEfFmYshPBg .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-7zDBlxEfFmYshPBg .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-7zDBlxEfFmYshPBg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-7zDBlxEfFmYshPBg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-7zDBlxEfFmYshPBg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-7zDBlxEfFmYshPBg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-7zDBlxEfFmYshPBg .cluster text{fill:#333;}#mermaid-svg-7zDBlxEfFmYshPBg .cluster span{color:#333;}#mermaid-svg-7zDBlxEfFmYshPBg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-7zDBlxEfFmYshPBg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-7zDBlxEfFmYshPBg rect.text{fill:none;stroke-width:0;}#mermaid-svg-7zDBlxEfFmYshPBg .icon-shape,#mermaid-svg-7zDBlxEfFmYshPBg .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-7zDBlxEfFmYshPBg .icon-shape p,#mermaid-svg-7zDBlxEfFmYshPBg .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-7zDBlxEfFmYshPBg .icon-shape rect,#mermaid-svg-7zDBlxEfFmYshPBg .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-7zDBlxEfFmYshPBg .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-7zDBlxEfFmYshPBg .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-7zDBlxEfFmYshPBg :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
用户下拉
用户触底
是
否
组件加载 aboutToAppear
加载初始数据
渲染列表
触发 onRefresh
isRefreshing = true
请求新数据
重置 optionList
isRefreshing = false
触发 onReachEnd
isLoadingMore?
忽略
触发 loadMore
isLoadingMore = true
追加新数据
push 到 optionList
isLoadingMore = false
🛠️ 技术实现方案
1. 核心交互组件选型
虽然社区提供了 react-native-MJRefresh 等第三方库，但为了保证在 OpenHarmony 平台上的最佳兼容性和零依赖负担，我们优先选用 React Native 原生的 FlatList 组件配合 RefreshControl。
- FlatList: 内置了高效的列表回收机制（Virtualization），天然支持 onEndReached（上拉加载）。
- RefreshControl: RN 标准下拉刷新组件，已完美适配 OpenHarmony 原生刷新控件。
2. 状态管理设计
为了实现无缝的交互体验，我们设计了完备的状态机：
| loading | boolean | 首次加载状态 | 进入页面为 true，首屏数据返回后 false |
| refreshing | boolean | 下拉刷新状态 | 下拉触发为 true，数据更新后 false |
| loadingMore | boolean | 上拉加载状态 | 触底触发为 true，分页数据追加后 false |
| error | boolean | 请求失败状态 | 请求异常为 true，重试成功后 false |
| hasMore | boolean | 是否有更多数据 | 根据返回数据量判断，用于控制 Footer 显示 |
| page | number | 当前页码 | 刷新重置为 1，上拉成功后 +1 |
3. 关键代码解析
3.1 智能分页加载 (Smart Pagination)
我们在 onEndReached 回调中加入了严格的防抖与状态检查，防止用户快速滑动时触发重复请求。
// src/components/ProductList.tsx
// 触底回调
const onEndReached = () => {
// 仅在非加载中、非刷新中、非错误且有更多数据时触发
if (!loading && !refreshing && !loadingMore && hasMore && !error) {
const nextPage = page + 1;
setPage(nextPage);
loadData(nextPage, false);
}
};
3.2 错误处理与重试机制 (Error & Retry)
针对移动端不稳定的网络环境，我们实现了“加载失败”状态。当分页请求失败时，Footer 会变更为“点击重试”按钮，用户点击后可重新发起当前页请求。
// 列表底部组件渲染逻辑
const renderFooter = () => {
if (error) {
return (
<TouchableOpacity style={styles.footer} onPress={retryLoad}>
<Text style={styles.errorText}>加载失败，点击重试</Text>
</TouchableOpacity>
);
}
// … 其他状态 (Loading / NoMoreData)
};
3.3 下拉刷新适配 (Pull-to-Refresh)
集成 RefreshControl 并适配 OpenHarmony 的主题色。
<FlatList
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
colors={['#0a59f7']} // 适配品牌色
/>
}
// …
/>
✅ 运行验证
1. 生成 Harmony Bundle
执行以下命令重新打包 JS Bundle：
npm run dev
确保控制台输出 [CREATED] …/bundle.harmony.js
2. 验证场景列表
在 OpenHarmony 真机/模拟器上进行以下操作验证：
强化实现后效果： 
总结
本次实践，我尝试实现了列表交互功能进行技术解析，重点涵盖数据初始化、下拉刷新及上拉加载更多机制。
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
