前言:
在上一篇文章中,我们深入探讨了如何在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