当前位置：首页 > news >正文

鸿蒙应用开发实战：轻松实现列表上拉加载更多

news 2026/7/20 17:35:17

文章目录

- 一、引言
- 二、效果预览与核心思路
- 三、代码实现与详解
- - 3.1 定义数据与状态
  - 3.2 构建列表 UI
- 四、完整代码示例
- 五、总结

这是一个使用鸿蒙技术开发的本地原生记账应用，非常适合大家用来练手。相关源码已上传至 Github，点击此处查看项目。欢迎大家交流、指正，也欢迎提交 PR。

一、引言

在移动应用开发中，列表的“上拉加载更多”是一个极其常见的交互模式。当用户滑动列表到底部时，自动加载下一页数据，能够极大地提升用户体验。在鸿蒙（HarmonyOS）应用开发中，实现这一效果同样非常便捷。

本文将带你从零开始，手把手实现一个带有“正在加载中”提示的上拉加载效果，让你快速掌握其核心实现原理。

二、效果预览与核心思路

我们先来看一下最终要实现的效果：当列表滑动到底部时，底部会显示一个“正在加载中…”的提示，模拟网络请求完成后，新的数据被追加到列表中，加载提示消失。

实现这个效果，主要依赖以下几个核心点：

List组件：作为列表的容器，提供滚动和布局能力。
onReachEnd事件：List组件提供的一个回调事件，当列表滚动到底部时自动触发。
状态管理：通过一个@State变量来控制“加载中”状态的显示与隐藏。
数据模拟：使用setTimeout模拟异步网络请求。

三、代码实现与详解

下面我们直接进入代码环节，看看如何一步步构建这个功能。

3.1 定义数据与状态

首先，我们需要定义列表的数据源和一个用于标识加载状态的状态变量。

@Entry@Componentstruct PullUpLoadDemo{// 列表数据源@StateprivatelistData:string[]=[];// 是否正在加载中@StateprivateisLoading:boolean=false;aboutToAppear(){// 初始化时加载第一页数据this.loadMoreData();}// 模拟加载更多数据loadMoreData(){// 模拟网络请求延迟setTimeout(()=>{// 生成新的数据项letnewData:string[]=[];for(leti=0;i<10;i++){newData.push(`列表项${this.listData.length+i+1}`);}// 将新数据追加到现有数据中this.listData=[...this.listData,...newData];// 加载完成，更新状态this.isLoading=false;},1500);// 模拟1.5秒的网络延迟}build(){// ... 构建UI}}

3.2 构建列表 UI

接下来，在build方法中构建我们的列表 UI。关键在于List组件的onReachEnd事件。

build(){Column(){List(){// 1. 使用 ForEach 渲染数据列表ForEach(this.listData,(item:string)=>{ListItem(){Text(item).width('100%').height(80).fontSize(18).textAlign(TextAlign.Center).backgroundColor(Color.White).borderRadius(10).margin({top:10})}},(item:string)=>item)// 2. 在列表末尾添加“加载中”提示项if(this.isLoading){ListItem(){Row(){LoadingProgress().width(24).height(24).margin({right:10})Text('正在加载中...').fontSize(16).fontColor('#666')}.justifyContent(FlexAlign.Center).width('100%').height(60)}}}.width('100%').height('100%').backgroundColor('#F5F5F5')// 3. 核心：监听列表滚动到底部事件.onReachEnd(()=>{// 如果当前正在加载，则直接返回，避免重复请求if(this.isLoading){return;}// 设置加载状态为 true，显示加载提示this.isLoading=true;// 调用加载数据的方法this.loadMoreData();})}.width('100%').height('100%').padding(10)}

四、完整代码示例

为了方便你直接运行和测试，这里提供完整的代码片段。

@Entry@Componentstruct PullUpLoadDemo{@StateprivatelistData:string[]=[];@StateprivateisLoading:boolean=false;aboutToAppear(){this.loadMoreData();}loadMoreData(){setTimeout(()=>{letnewData:string[]=[];for(leti=0;i<10;i++){newData.push(`列表项${this.listData.length+i+1}`);}this.listData=[...this.listData,...newData];this.isLoading=false;},1500);}build(){Column(){List(){ForEach(this.listData,(item:string)=>{ListItem(){Text(item).width('100%').height(80).fontSize(18).textAlign(TextAlign.Center).backgroundColor(Color.White).borderRadius(10).margin({top:10})}},(item:string)=>item)if(this.isLoading){ListItem(){Row(){LoadingProgress().width(24).height(24).margin({right:10})Text('正在加载中...').fontSize(16).fontColor('#666')}.justifyContent(FlexAlign.Center).width('100%').height(60)}}}.width('100%').height('100%').backgroundColor('#F5F5F5').onReachEnd(()=>{if(this.isLoading){return;}this.isLoading=true;this.loadMoreData();})}.width('100%').height('100%').padding(10)}}