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

前言:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/57660.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学成在线实战

#1024程序员节&#xff5c;征文# 一、Bug修改 在实战之前&#xff0c;老师留了一个bug&#xff0c;这个bug出现的原因是因为在查询课程计划时&#xff0c;使用的是Inner join查询&#xff0c;所以当章节下面没有小节的时候&#xff0c;是查不出来数据的&#xff0c;只需要将其…

PHP企业门店订货通进销存系统小程序源码

订货通进销存系统&#xff0c;企业运营好帮手&#xff01; &#x1f4e6; 开篇&#xff1a;告别繁琐&#xff0c;企业运营新选择 嘿&#xff0c;各位企业主和创业者们&#xff01;今天我要给大家介绍一款超实用的企业运营神器——“订货通进销存系统”。在这个数字化时代&…

YOLOv5_DeepSORT实现电动自行车头盔佩戴检测系统

获取更多完整项目代码数据集&#xff0c;点此加入免费社区群 &#xff1a; 首页-置顶必看 文档说明 本文档是毕业设计——基于深度学习的电动自行车头盔佩戴检测系统的开发环境配置说明文档&#xff0c;该文档包括运行环境说明以及基本环境配置两大部分。在程序运行前请认真查…

零售行业的数字化营销转型之路

一方面&#xff0c;市场竞争激烈&#xff0c;电商平台、新兴品牌和跨界对手带来巨大压力。另一方面&#xff0c;消费者需求变化迅速&#xff0c;更加追求个性化、多元化和便捷化的购物体验&#xff0c;同时传统零售企业还面临着高成本压力&#xff0c;如租金、人力和库存等。 然…

Rsync数据复制/备份服务应用

文章目录 1. rsync概述1.1 什么是Rsync1.2 rsync的功能1.3 rsync 的功能特性1.4 Rsync 增量复制原理1.5 生产场景架构集群备份方案 2. Rsync工作方式介绍与实践2.1 本地数据传输模式2.1.1 本地数据传输模式语法2.1.2 本地数据传输模式实践 2.2 远程Shell 数据传输模式2.2.1 远程…

WSL(Ubuntu20.04)编译和安装DPDK

编译和安装DPDK DPDK可以使用工具meson和ninja在您的系统上进行配置、构建和安装。 DPDK配置 要配置DPDK构建&#xff0c;请使用&#xff1a; meson setup build --prefix/home/xx/dpdk19.11xxxx:~/dpdk-stable-19.11.14/$ meson setup build Message:Content Skipped libs…

React与TypeScript

React创建项目方式 react脚手架&#xff1a;create-react-app 项目名 --template typescript基于vite创建项目&#xff1a;npm init vitelatest 项目名 – --template react-ts useState自动推导 通常React会根据传入useState的默认值来自动推导类型&#xff0c;不需要显示标…

数据结构练习题5(链表和栈)

1环形链表 II 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测…

vue实现富文本编辑器上传(粘贴)图片 + 文字

vue实现富文本编辑器上传&#xff08;粘贴&#xff09;图片 文字 1.安装插件 npm install vue-quill-editor -s2.在使用vue-quill-editor富文本的时候&#xff0c;对于图片的处理经常是将图片转换成base64&#xff0c;再上传数据库&#xff0c;但是base64不好存储。 原理&a…

十七、行为型(命令模式)

命令模式&#xff08;Command Pattern&#xff09; 概念 命令模式是一种行为型设计模式&#xff0c;它将请求封装成一个对象&#xff0c;从而使您可以使用不同的请求对客户进行参数化&#xff0c;排队请求&#xff0c;以及支持可撤销操作。通过这种模式&#xff0c;调用操作的…

全面指南:中国人工智能大模型技术创新与应用

近期&#xff0c;中国人工智能协会发布了《中国人工智能大模型技术白皮书》&#xff0c;涵盖了大模型发展历程、关键技术、困难及挑战以及未来发展的展望。 在此本文总结了下白皮书的主要内容&#xff0c;并附上白皮书~ 目录第 1 章 大模型技术概述 ........................…

基础数据结构——队列(双端队列,优先级队列,阻塞队列)

双端队列、队列、栈对比 定义特点队列一端删除&#xff08;头&#xff09;另一端添加&#xff08;尾&#xff09;First In First Out栈一端删除和添加&#xff08;顶&#xff09;Last In First Out双端队列两端都可以删除、添加优先级队列优先级高者先出队延时队列根据延时时间…

微信小程序地图功能开发:绘制多边形和标记点

在微信小程序中&#xff0c;地图功能是一个常见的需求&#xff0c;尤其是在需要展示地理位置、导航指引或区域覆盖的应用中。本文将通过一个实际的微信小程序地图组件示例&#xff0c;介绍如何在地图上绘制多边形区域和标记点&#xff0c;以及如何响应用户的点击事件。 项目背景…

V2X介绍

文章目录 什么是V2XV2X的发展史早期的DSRC后起之秀C-V2XC-V2X 和DSRC 两者的对比 什么是V2X 所谓V2X&#xff0c;与流行的B2B、B2C如出一辙&#xff0c;意为vehicle to everything&#xff0c;即车对外界的信息交换。车联网通过整合全球定位系统&#xff08;GPS&#xff09;导…

实操 maxkey对接三方文档

实操 maxkey 对接三方文档 概述前置准备&#xff1a;MaxKey 安装与配置&#xff1a;第三方系统准备网络环境 对接三方配置oauth2协议对接导入jar包&#xff08;调接口&#xff09;权限加回调重定向获取token处理业务 api对接三方获取api凭证配置 MaxKey更新代码 概述 最近在搞m…

【华为HCIP实战课程十六】OSPF虚链路Vlink,网络工程师

一、vlink续 区域内部的路由优于区域之间的路由,区域之间优于外部路由,外部路由类型1优于外部类型2 只有同一级别的路由才会对比cost <R3>tracert 11.1.1.1 traceroute to 11.1.1.1(11.1.1.1), max hops: 30 ,packet length: 40,press CTRL_C to break 1 10.1.35.5 …

2024年808数据结构答案

1.已知带头结点单链表&#xff0c;H为头指针。设计一个算法&#xff0c;查找到链表的第m个结点(不包含头结点)&#xff0c;并将元 素值为X的结点插入到该结点后&#xff0c;形成一个新的链表。 // 定义单链表节点结构 typedef struct Node {int data;struct Node* next; } Nod…

fluent-ffmpeg操作MP3文件深入解析

软考鸭微信小程序 学软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 引言 fluent-ffmpeg是一个功能强大的Node.js库&#xff0c;它为FFmpeg提供了一个流畅的接口。FFmpeg是一个著名的多媒体框架&#xff0c;以处理音频、视频和…

three融合GIS创建地球模型(二)

创建一个地球模型通常涉及到使用纹理贴图来给球体添加地球表面的图像。在 Three.js 中&#xff0c;你可以通过加载一张地球的图片作为纹理&#xff0c;并将其应用到一个 SphereGeometry 上来实现这一点。以下是如何完成这个过程的一个基本示例&#xff1a; 步骤 1: 设置场景、…

rust入门基础总结

文章目录 前言1、输出格式规范一、占位符相关&#xff08;一&#xff09;{}与{:?} 二、参数替换方式&#xff08;一&#xff09;位置参数&#xff08;二&#xff09;具名参数 三、格式化参数&#xff08;一&#xff09;宽度&#xff08;二&#xff09;对齐&#xff08;三&…