【HarmonyOS ArkTS】 下拉刷新和上拉加载实现

一、下拉刷新功能详解

1. 功能说明

下拉刷新是移动应用中常见的交互方式，当用户手指从上往下拖动页面时会出现一个刷新动画，松手后会重新加载最新的数据。

graph LR
用户下拉 --> 触发onRefreshing回调 --> 数据请求 --> 解析响应数据更新 --> UI自动更新 --> 设置isRefreshing停止动画

2. 实现原理

使用了HarmonyOS中ArkUI提供的 Refresh 组件来实现这个功能。

代码解析：

@State isRefreshing: boolean = false

• 定义了一个状态变量用于控制刷新动画是否显示

Refresh({refreshing: $$this.isRefreshing}) {
  // ...其他代码
}
.onRefreshing(async () => {
  const result: IRes = await this.getJokeLis()
  this.jokes = result.data
  this.isRefreshing = false
})

• Refresh 是一个容器组件，包裹需要支持下拉刷新的内容
• refreshing 属性绑定到 isRefreshing 状态变量，控制刷新状态
• onRefreshing 是下拉刷新的回调函数，当用户触发下拉动作时会被调用

3. 数据更新流程

1. 用户下拉页面 ->
2. 触发 onRefreshing 回调 ->
3. 调用 getJokeLis() 方法请求新数据 ->
4. 收到响应后解析数据 ->
5. 更新 jokes 数据源 ->
6. 设置 isRefreshing = false 停止刷新动画

二、上拉加载更多功能详解

1. 功能说明

上拉加载更多是在用户滚动到底部时自动加载更多数据的功能，常用于分页展示大量数据。

graph LR
列表滚动到底 --> 触发onReachEnd回调 --> 数据请求 --> 解析响应追加数据 --> UI自动更新

2. 实现原理

在本项目中，我们使用了HarmonyOS的 List 组件提供的 onReachEnd 方法。

代码解析：

jokeNum: number = 5

• 这个变量定义了每次请求的数据数量

.onReachEnd(async ()=>{
  const result: IRes = await this.getJokeLis()
  this.jokes = [...this.jokes, ...result.data]
})

• onReachEnd 是列表滚动到底部时触发的回调
• 我们在这里再次调用 getJokeLis() 获取更多数据
• 将新数据追加到现有列表中（使用了扩展运算符合并数组）

ListItem(){
  LoadingProgress().width(50)
}
.width('100%')

• 列表底部添加加载进度条，提示用户正在加载更多数据

三、小贴士（常见问题）

1. 如何防止重复加载？

目前的实现没有防重机制，可以添加一个加载状态变量来避免重复请求：

@State isLoadingMore: boolean = false

// 在onReachEnd中添加判断
if (!this.isLoadingMore) {
  this.isLoadingMore = true
  const result: IRes = await this.getJokeLis()
  // ...原有代码...
  this.isLoadingMore = false
}

2. 如何显示"没有更多数据"提示？

可以添加一个标志位判断是否已加载完所有数据：

@State noMoreData: boolean = false

// 在getJokeLis返回空数据时
if (result.data.length === 0) {
  this.noMoreData = true
} else {
  // ...原有逻辑...
}

然后在列表底部根据状态显示不同内容：

if (this.noMoreData) {
  ListItem() {
    Text('没有更多数据了')
      .fontSize(14)
      .textAlign(TextAlign.Center)
      .width('100%')
  }
} else {
  ListItem(){
    LoadingProgress().width(50)
  }
  .width('100%')
}

四、总结

对于初学者来说，理解这两个功能的关键在于：

1. 状态管理：通过 @State 装饰器控制组件的状态变化
2. 组件回调：利用 Refresh 和 List 提供的内置回调方法
3. 数据驱动视图：HarmonyOS采用声明式开发范式，数据变化会自动更新UI

建议新手开发者先理解整个数据流动的过程，再尝试自己修改参数或添加一些简单的功能，比如添加加载失败重试等功能。