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

HarmonyOS NEXT开发实战：实现高效下拉刷新与上拉加载组件（二）刷新核心逻辑与空页面集成

news 2025/7/6 12:25:34

前言：

在上一篇文章中，我们深入探讨了如何在HarmonyOS中实现一个功能完备的空页面组件。现在，我们将进入下拉刷新和上拉加载功能的核心逻辑实现。这不仅仅是技术实现，更是对用户体验的深刻理解。本文将详细介绍如何将空页面与下拉刷新、上拉加载逻辑相结合，打造一个既高效又用户友好的交互体验。

一、核心逻辑的构建

在开发下拉刷新和上拉加载功能时，我们首先需要定义几个关键字段：页面总数、开始页数、页面数据条数。这些字段是分页请求的基础，也是我们实现逻辑的起点。

那么在我们的核心工具类里需要对网络请求做成一个函数参数，进行外部请求
代码示例：

private requestData:(currentPage:number,pageSize:number)=>void

接下来，我们需要实现外部调用监听，以便我们的加载逻辑能够与外部进行沟通。这包括刷新完成、加载完成、数据为空监听等。

代码示例：

export interface PullRefreshListener<T> {refreshCompleted:()=>void; loadMoreCompleted:()=>void;emptyPage:()=>void;setData:(data:T[], isRefreshLast:boolean)=>void;lastData:()=>void;moreLoadFail:(error:BaseError)=>void;onLoadFail:(error:BaseError)=>void;
}

二、下拉刷新与上拉加载的实现

在实现下拉刷新和上拉加载时，我们需要考虑多种状态，包括数据为空、加载错误等。核心逻辑包括判断数据是否为空，是否到达最后一页，以及如何处理加载错误。

核心逻辑代码：

import { BaseError } from '@kangraoo/baselibrary/src/main/ets/exception/NetworkError';
import { Log } from '@kangraoo/utils';export interface PullRefreshListener<T> {refreshCompleted:()=>void;loadMoreCompleted:()=>void;emptyPage:()=>void;setData:(data:T[], isRefreshLast:boolean)=>void;lastData:()=>void;moreLoadFail:(error:BaseError)=>void;onLoadFail:(error:BaseError)=>void;
}export class PullRefreshList<T>{//页面总数readonly PAGE_COUNT_SIZE:number = 10//当前第几页readonly CURRENT_PAGE:number = 1private isRefreshLast:boolean = true//开始private currentPage:number//页数private pageSize: number//网络请求数据啥的private requestData:(currentPage:number,pageSize:number)=>voidprivate pullRefreshListener:PullRefreshListener<T>;constructor(requestData: (currentPage: number, pageSize: number) => void, pullRefreshListener: PullRefreshListener<T>,currentPage?: number, pageSize?: number) {this.currentPage = currentPage??this.CURRENT_PAGE