鸿蒙 HarmonyOS PullToRefresh下拉刷新二次封装

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页： 开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

介绍

在移动应用开发中，下拉刷新是一种常见的用户交互模式。本文将介绍如何在HarmonyOS ArkUI中封装一个通用的下拉刷新组件，并实现数据的加载与刷新。

我们需要一个可以复用的下拉刷新组件，用于数据列表刷新和加载更多功能。这个组件需要包含加载中、加载失败和无数据的视图，同时支持自定义列表视图和骨架屏。

代码实现

首先，我们定义一个组件 PullToRefreshList，它封装了下拉刷新、加载更多、骨架屏、错误视图和空视图的逻辑。

封装下拉刷新

1、导入组件

oh-package.json5

// 版本好根据自己的需求增加，本文中使用 "^2.0.5"
"@ohos/pulltorefresh": "XXXXXX"

2、组件定义

import {
    PullToRefresh } from '@ohos/pulltorefresh';
import {
    promptAction } from '@kit.ArkUI';
import {
    CommonConstants } from '../common/CommonConstants';
import {
    LoadingStatus } from '../common/CommonEnums';
import {
    Constants } from '../common/Constants';

/** 
 * @FileName : PullToRefreshList
 * @Author : 沫小北
 * @Description : 封装下拉刷新
 */
@Component
export struct PullToRefreshList {
   
  @Link listData: object[];
  @Link loadingStatus: LoadingStatus;
  @BuilderParam customSkeletonView: () => void = this.baseSkeletonView;
  @BuilderParam customFailureView: () => void = this.baseFailureView;
  @BuilderParam customEmptyView: () => void = this.baseEmptyView;
  @BuilderParam listView: () => void;
  listScroller: Scroller = new Scroller();
  @State currentPage: number = 1;
  getList?: (page: number) => void;
  @State columnOpacity: number = 1;
  resolve: ((value: string | PromiseLike<string>) => void) | undefined = undefined;
  @State textHint: string = '';

  aboutToAppear(): void {
   
    if (this.getList) {
   
      this.currentPage = 1
      this.getList(this.currentPage)
    }
  }

  listDataChange() {
   
    setTimeout(() => {
   
      if (this.resolve) {
   
        this.resolve(this.currentPage === 1 ? '刷新完成了' : '')
      }
    }, 100)
  }

  startAnimation(): void {
   
    animateTo(Constants.SKELETON_ANIMATION, () => {
   
      this.columnOpacity =