HarmonyOS 5.0.0 或以上：实现列表下拉刷新与空数据占位实战

前端付豪小号2

于 2025-05-23 11:18:25 发布

阅读量313

点赞数 8

分类专栏：华为鸿蒙从小白到大师文章标签：华为 harmonyos

本文链接：https://blog.csdn.net/2501_92049284/article/details/148160085

版权

华为鸿蒙从小白到大师专栏收录该内容

119 篇文章

订阅专栏

一、功能简介

本篇将讲解如何在 ArkTS 中实现列表的下拉刷新操作，并结合空数据状态的占位图文提示，适用于新闻类、社区类 App 的动态内容加载场景。

二、页面结构

entry/src/main/ets/pages/RefreshDemo.ets

三、代码演示

@Entry
@Component
struct RefreshDemo {
  @State list: Array<string> = []
  @State refreshing: boolean = false

  aboutToAppear() {
    this.loadData()
  }

  loadData() {
    // 模拟异步加载数据
    setTimeout(() => {
      this.list = ['苹果', '香蕉', '橘子']
      this.refreshing = false
    }, 1000)
  }

  onRefresh() {
    this.refreshing = true
    this.list = []  // 清空再加载
    this.loadData()
  }

  build() {
    Column() {
      Text('水果列表')
        .fontSize(20)
        .margin({ bottom: 12 })

      // 下拉刷新容器
      List({ space: 12 }) {
        // 如果为空，展示占位
        If(this.list.length === 0 && !this.refreshing, () => {
          ListItem() {
            Column() {
              Image($r('app.media.empty'))  // 占位图资源
                .width(100)
                .height(100)
                .margin({ bottom: 12 })
              Text('暂无数据')
                .fontSize(18)
                .fontColor(Color.Gray)
            }
            .width('100%')
            .padding(40)
            .align(Alignment.Center)
          }
        })

        // 展示真实数据
        ForEach(this.list, (item, index) => {
          ListItem() {
            Text('🍎 ' + item)
              .fontSize(18)
              .padding(12)
              .backgroundColor('#f6f6f6')
              .borderRadius(8)
          }
        }, item => item)
      }
      .divider(false)
      .edgeEffect(EdgeEffect.Spring)
      .onScrollEdge({ edge: Edge.Top, callback: () => this.onRefresh() })
    }
    .width('100%')
    .padding(20)
  }
}

四、运行效果

页面加载后展示：

水果列表  
🍎 苹果  
🍌 香蕉  
🍊 橘子

下拉页面顶部时触发刷新 → 清空 → 加载数据 → 更新列表。
若加载中或数据为空时：
```
[占位图]
暂无数据
```

五、常见易错点与解决方法

易错点	表现	原因	解决方案
刷新无反应	拖动无效	没有设置 `.onScrollEdge`	设置 `edge: Edge.Top` 并绑定回调函数
占位图不显示	空白区域	图片路径错误或资源未添加	添加图片至 `resources/base/media/empty.png` 并引用 `$r('app.media.empty')`
列表闪烁	页面重复刷新	刷新逻辑未正确管理 `refreshing` 状态	设置状态变量避免过度渲染
加载无动画	用户体验差	未添加加载指示器	可搭配 Loading 组件或后续章节补充动画效果