鸿蒙中，如何实现下拉刷新与上拉加载？

你是不是也在想——“鸿蒙这么火，我能不能学会？”
答案是：当然可以！
这个专栏专为零基础小白设计，不需要编程基础，也不需要懂原理、背术语。我们会用最通俗易懂的语言、最贴近生活的案例，手把手带你从安装开发工具开始，一步步学会开发自己的鸿蒙应用。
不管你是学生、上班族、打算转行，还是单纯对技术感兴趣，只要你愿意花一点时间，就能在这里搞懂鸿蒙开发，并做出属于自己的App！
📌 关注本专栏《零基础学鸿蒙开发》，一起变强！
每一节内容我都会持续更新，配图+代码+解释全都有，欢迎点个关注，不走丢，我是小白酷爱学习，我们一起上路 🚀

前言

在 鸿蒙操作系统（HarmonyOS）中，实现 下拉刷新 和 上拉加载 主要依赖于 ArkUI 和 ScrollView 等组件。通过这些组件，我们可以实现类似 列表视图 的动态数据加载和更新。

1. 下拉刷新与上拉加载的实现思路

• 下拉刷新：用户通过手指向下拉动列表，触发刷新操作。通常用于从服务器拉取最新数据。
• 上拉加载：用户滚动到底部时触发加载更多数据的操作。通常用于分页加载数据。

在鸿蒙的 ArkUI 中，我们可以通过 List 或 ScrollView 组件实现类似的效果。我们通常结合使用 onRefresh 和 onReachBottom 事件来处理刷新和加载。

2. 使用 List 组件实现下拉刷新与上拉加载

鸿蒙提供的 List 组件支持 下拉刷新 和 上拉加载 功能。我们可以通过配置 onRefresh 和 onReachBottom 事件来实现这两种功能。

2.1 基本的下拉刷新和上拉加载实现

import {
  Component,
  createElement,
  List,
  Text,
  Refresh,
  ScrollView,
} from '@ohos.arkui';

// 定义组件
@Component({
  name: 'ListViewComponent',
  template: `
    <list ref="listView" @refresh="handleRefresh" @reachBottom="handleLoadMore">
      <template>
        <text>{{ item }}</text>
      </template>
    </list>
  `,
  style: `
    list {
      margin-top: 10px;
    }
    text {
      font-size: 20px;
      color: #333;
    }
  `
})
export class ListViewComponent {
  items: string[] = []; // 存储列表项
  page: number = 1; // 当前页数

  constructor() {
    this.loadData();  // 初始化加载数据
  }

  // 模拟数据加载方法
  loadData() {
    for (let i = 0; i < 10; i++) {
      this.items.push(`Item ${this.page * 10 + i + 1}`);
    }
    this.page++;
  }

  // 处理下拉刷新
  handleRefresh() {
    this.items = [];  // 清空旧数据
    this.page = 1;  // 重置页数
    this.loadData();  // 重新加载数据
    this.$refs.listView.refreshFinish();  // 结束刷新
  }

  // 处理上拉加载
  handleLoadMore() {
    this.loadData();  // 加载更多数据
  }
}

3. 解释代码

3.1 List 组件

• <list> 组件用于创建一个 可滚动的列表。它可以包含多个 子组件，例如 <text>，每个子组件会代表列表中的一项。
• @refresh：这个事件会在 下拉刷新 时触发。我们通过绑定 handleRefresh 方法来处理下拉刷新逻辑。
• @reachBottom：这个事件会在 上拉加载 时触发。我们通过绑定 handleLoadMore 方法来处理上拉加载逻辑。

3.2 handleRefresh 方法

• 当用户下拉时，handleRefresh 方法会清空当前列表数据并重新加载数据。通过 this.$refs.listView.refreshFinish()，我们通知 List 组件刷新结束。

3.3 handleLoadMore 方法

• 当用户上拉时，handleLoadMore 方法会加载更多数据，通常会根据分页来请求下一页的数据。

3.4 数据加载

• loadData 方法模拟加载数据。每次加载新的一页时，它会往列表中添加 10 条新数据。

4. 添加刷新和加载动画

鸿蒙的 List 组件提供了默认的下拉刷新动画和上拉加载提示，你可以通过配置来更改动画样式。

例如，下面的代码展示了如何自定义刷新控件：

<Component({
  name: 'CustomListViewComponent',
  template: `
    <list ref="listView" @refresh="handleRefresh" @reachBottom="handleLoadMore">
      <template>
        <text>{{ item }}</text>
      </template>
      <refresh>
        <text>下拉刷新中...</text>
      </refresh>
      <loadmore>
        <text>加载更多...</text>
      </loadmore>
    </list>
  `,
  style: `
    list {
      margin-top: 10px;
    }
    text {
      font-size: 20px;
      color: #333;
    }
  `
})

在这个例子中，我们自定义了 refresh 和 loadmore 组件的内容来提示用户下拉刷新和上拉加载的状态。

5. 使用 ScrollView 实现自定义下拉刷新和上拉加载

除了使用 List 组件外，你还可以使用 ScrollView 组件来实现下拉刷新和上拉加载。ScrollView 组件通常用于显示长内容，而 List 适用于大规模的列表展示。

示例：使用 ScrollView 实现

import { Component, ScrollView, Text } from '@ohos.arkui';

// 定义组件
@Component({
  name: 'ScrollViewComponent',
  template: `
    <scroll-view @scrollEnd="handleLoadMore">
      <div class="content">
        <text v-for="(item, index) in items" :key="index">{{ item }}</text>
      </div>
    </scroll-view>
  `,
  style: `
    .content {
      padding: 10px;
    }
    text {
      font-size: 20px;
      margin: 10px 0;
    }
  `
})
export class ScrollViewComponent {
  items: string[] = []; // 存储列表项
  page: number = 1; // 当前页数

  constructor() {
    this.loadData();  // 初始化加载数据
  }

  // 加载数据
  loadData() {
    for (let i = 0; i < 10; i++) {
      this.items.push(`Item ${this.page * 10 + i + 1}`);
    }
    this.page++;
  }

  // 上拉加载更多
  handleLoadMore() {
    this.loadData();  // 加载更多数据
  }
}

在这个例子中，scroll-view 组件包裹了一个 div，并通过 @scrollEnd 监听用户滚动到视图底部的事件，从而触发 上拉加载。

6. 总结

• 下拉刷新 和 上拉加载 是常见的 列表视图交互功能，鸿蒙系统通过 List 和 ScrollView 组件提供了很好的支持。
• @refresh 和 @reachBottom 事件用于实现 下拉刷新 和 上拉加载，并且可以在事件处理函数中编写逻辑来刷新数据或加载更多数据。
• 通过使用 refresh 和 loadmore 组件，可以为用户提供良好的刷新和加载体验。

这样，你就可以在 鸿蒙应用 中轻松实现 下拉刷新 和 上拉加载，提高应用的交互性和性能。

❤️ 如果本文帮到了你…

• 请点个赞，让我知道你还在坚持阅读技术长文！
• 请收藏本文，因为你以后一定还会用上！
• 如果你在学习过程中遇到bug，请留言，我帮你踩坑！