HarmonyOS中实现上拉加载下拉刷新
参考网址：Refresh-滚动与滑动-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
1.数据基类
//根据自己的业务数据扩展此类
//注意：一定要继承Object
export class PullToRefreshBean extends Object{name: string = ''num: number = 0//一定要写构造，不然取不到数据constructor(name: string, num: number) {super()this.name = namethis.num = num}
}2.PullToRefreshListener监听器
export interface PullToRefreshListener{loadMore: () => void;//监听加载更多refresh: () => void//监听数据刷新//错误写法：（这种写法应该是把方法当成了属性来实现）//loadMore(): void;//refresh(): void;
}3.PullToRefreshView刷新组件（相当于Android中自定义控件）
import { PullToRefreshListener } from "../ViewModel/PullToRefreshListener";@Component
export struct PullToRefreshView{@Link arr: Array<Object>@Link refreshing: boolean@State refreshOffset: number = 0;@State refreshState: RefreshStatus = RefreshStatus.Inactive;@State canLoad: boolean = false;@Link isLoading: boolean@Prop listener: PullToRefreshListener@Builder listItem(item: Object) {}@BuilderParam item: (item: Object) => void = this.listItem//头部刷新@BuilderrefreshBuilder() {Stack({ alignContent: Alignment.Bottom }) {// 可以通过刷新状态控制是否存在Progress组件// 当刷新状态处于下拉中或刷新中状态时Progress组件才存在if (this.refreshState != RefreshStatus.Inactive && this.refreshState != RefreshStatus.Done) {//转圈加载// Progress({ value: this.refreshOffset, total: 64, type: ProgressType.Ring })// .width(32).height(32)// .style({ status: this.refreshing ? ProgressStatus.LOADING : ProgressStatus.PROGRESSING })// .margin(10)Row() {LoadingProgress().height(32).width(48)Text("正在刷新...")}.width("100%").height(64).justifyContent(FlexAlign.Center)}}.clip(true).height("100%").width("100%")}//底部加载@Builderfooter() {Row() {LoadingProgress().height(32).width(48)Text("加载中...")}.width("100%").height(64).justifyContent(FlexAlign.Center)// 当不处于加载中状态时隐藏组件.visibility(this.isLoading ? Visibility.Visible : Visibility.Hidden)}build() {Refresh({ refreshing: $$this.refreshing, builder: this.refreshBuilder() }) {List() {//ForEach中不加index: number，会出只显示一条数据ForEach(this.arr, (item: Object, index: number) => {this.item(item)}, (item: Object, index: number) => index.toString())ListItem() {this.footer();}}.onScrollIndex((start: number, end: number) => {// 当达到列表末尾时，触发新数据加载if (this.canLoad && end >= this.arr.length - 1) {this.canLoad = false;this.isLoading = true;// 数据加载监听this.listener.loadMore()}}).onScrollFrameBegin((offset: number, state: ScrollState) => {// 只有当向上滑动时触发新数据加载if (offset > 5 && !this.isLoading) {this.canLoad = true;}return { offsetRemain: offset };}).scrollBar(BarState.Off)// 开启边缘滑动效果.edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })}.width('100%').height('100%').backgroundColor(0xDCDCDC).onOffsetChange((offset: number) => {this.refreshOffset = offset;}).onStateChange((state: RefreshStatus) => {this.refreshState = state;}).onRefreshing(() => {//刷新监听this.listener.refresh()})}
}4.组件中使用
import {PullToRefreshView } from "./PullToRefreshView";
import { PullToRefreshListener } from "../ViewModel/PullToRefreshListener";
import { PullToRefreshBean } from "../constants/PullToRefreshBean";@Entry({routeName: 'IndexPage'})@Component
export struct IndexPage{@State arr: Array<PullToRefreshBean> = [];@State refreshing: boolean = false;@State isLoading: boolean = false;//生命周期方法，在build方法之前aboutToAppear(): void {//console.log(`上一个界面传过来的参数：${(router.getParams() as ParamsBean).name}`)//接口调数据（此处是测试数据）for (let index = 0; index < 10; index++) {this.arr.push(new PullToRefreshBean(`${index}`, index))}}@BuilderlistItem(item: Object) {ListItem() {//列表条目组件布局，根据业务需求自己扩展，此处也可以提取到子组件中（为了代码简洁和解耦）Text('' + (item as PullToRefreshBean).name).width('100%').height(80).fontSize(16).textAlign(TextAlign.Center).backgroundColor(0xFFFFFF)}.borderWidth(1).onClick(() => {//列表条目点击事件监听console.log('我点击的条目是:'+item)})}@State listener: PullToRefreshListener = {loadMore: (): void => {console.log('加载数据')setTimeout(() => {let a = this.arr.length-1for (let index = a; index < a+10; index++) {this.arr.push(new PullToRefreshBean(`${index}`, index))}this.isLoading = false;}, 2000)},refresh: (): void => {console.log('刷新数据');setTimeout(() => {this.refreshing = false;}, 2000)}}build() {Column(){PullToRefreshView({arr: this.arr,item: this.listItem,listener: this.listener,refreshing: this.refreshing,isLoading: this.isLoading})}}
}说明：我是根据官网提供的Refresh实例代码封装的简单使用（代码可直接使用），各位大神有其他酷炫的效果可以交流交流！！！
相关文章：
HarmonyOS中实现上拉加载下拉刷新
参考网址：Refresh-滚动与滑动-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 1.数据基类 //根据自己的业务数据扩展此类 //注意：一定要继承Object export class PullToRefreshBean extends Object{name: string …...
【轻松学C：编程小白的大冒险】--- C语言简介 02
在编程的艺术世界里，代码和灵感需要寻找到最佳的交融点，才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里，我们将共同追寻这种完美结合，为未来的世界留下属于我们的独特印记。 【轻松学C：编程小白的大冒险】…...
MySQL安装，配置教程
一、Linux在线yum仓库安装 打开MySQL官方首页，链接为：https://www.mysql.com/ 界面如下： 在该页面中找到【DOWNOADS】选项卡，点击进入下载页面。 在下载界面中，可以看到不同版本的下载链接，这里选择【My…...
项目实战——使用python脚本完成指定OTA或者其他功能的自动化断电上电测试
前言 在嵌入式设备的OTA场景测试和其他断电上电测试过程中，有的场景发生在夜晚或者随时可能发生，这个时候不可能24h人工盯着，需要自动化抓取串口日志处罚断电上电操作。 下面的python脚本可以实现自动抓取串口指定关键词，然后触发…...
多活架构的实现原理与应用场景解析
一、多活架构为何如此重要？ 企业的业务运营与各类线上服务紧密相连，从日常的购物消费、社交娱乐，到金融交易、在线教育等关键领域，无一不依赖于稳定可靠的信息系统。多活架构的重要性愈发凸显，它宛如一位忠诚的卫士，为业务的平稳运行保驾护航。 回想那些因系统故障引发的…...
01-springclound
OpenFeign OpenFeign的日志级别 GateWay GateWay自定义过滤器 自定义过滤器，实现Order接口 数字小的先执行 GateWay传递用户信息 1、需要在网关搞定登录校验，将用户信息保存到请求头 2、网关到微服务 通过 springmvc的拦截器 来处理，将用户…...
Pandas-RFM会员价值度模型
文章目录 一. 会员价值度模型介绍二. RFM计算与显示1. 背景2. 技术点3. 数据4. 代码① 导入模块② 读取数据③ 数据预处理Ⅰ. 数据清洗, 即: 删除缺失值, 去掉异常值.Ⅱ. 查看清洗后的数据Ⅲ. 把前四年的数据, 拼接到一起 ④ 计算RFM的原始值⑤ 确定RFM划分区间⑥ RFM计算过程⑦…...
Java基础知识面试题
1.Java语言的特点？ 1.一面向对象（封装，继承，多态）； 2.平台无关性（ Java 虚拟机实现平台无关性）；(类是一种定义对象的蓝图或模板)3.支持多线程（ C 语言没有内…...
WebSocket监听接口
在Vue.js中使用WebSocket来监听接口其实相对简单。WebSocket是一种在单个TCP连接上进行全双工通信的协议，通常用于需要实时数据更新的场景，比如聊天应用、实时通知等。 以下是一个在Vue.js中使用WebSocket的示例： 1. 创建Vue项目 如果你还…...
Kotlin语言的编程范式
Kotlin语言的编程范式 Kotlin是一种现代的编程语言，旨在提高开发效率，减少代码复杂度。在过去几年中，Kotlin在Android开发中获得了极大的普及，同时也逐渐被用在服务器端、Web开发、数据科学等多个领域。本文将深入探讨Kotlin的编…...
【权限管理】Apache Shiro学习教程
Apache Shiro 是一个功能强大且灵活的安全框架，主要用于身份认证（Authentication）、授权（Authorization）、会话管理（Session Management）和加密（Cryptography）。它旨在为…...
网络安全 信息收集入门
1.信息收集定义 信息收集是指收集有关目标应用程序和系统的相关信息。这些信息可以帮助攻击者了解目标系统的架构、技术实现细节、运行环境、网络拓扑结构、安全措施等方面的信息，以便我们在后续的渗透过程更好的进行。 2.收集方式-主动和被动收集 ①收集方式不同…...
Java Web开发进阶——RESTful API设计与开发
随着分布式系统和微服务架构的流行，RESTful API已成为现代Web应用中后端与前端、第三方系统交互的重要方式。本节将深入探讨RESTful API的设计原则、实现方式以及如何使用Spring Boot开发高效、可靠的RESTful服务。 1. 理解RESTful API的设计原则 1.1 什么是RESTfu…...
图片已经在windows上旋转了，但是在linux上仍然显示不正常
公司接了一个linux产品的售后工作，我们现在的产品都是android。linux设备如果要播放竖屏的图片在linux主板上。需要将图片旋转下才能正常播放。 我拿到图片以后，就用window图片编辑器打开了图片如下图左。选择逆时针选择了90 然后另存图片为如下图右。 …...
关于大数据的基础知识（二）——国内大数据产业链分布结构
成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于大数据的基础知识（二&a…...
Flutter鸿蒙化 在鸿蒙应用中添加Flutter页面
前言 今天这节课我们讲一下 在鸿蒙应用中添加Flutter页面。 作用： 之前有很多朋友和网友问我鸿蒙能不能使用Flutter开发，他们的项目已经用Flutter开发成熟了有什么好的方案呢，今天讲到这个就可以很好的解决他们的问题，例如我们正式项目中可能是一部分native 开发 一部分…...
【递归，搜索与回溯算法 综合练习】深入理解暴搜决策树：递归，搜索与回溯算法综合小专题（二）
优美的排列 题目解析 算法原理 解法 ：暴搜 决策树 红色剪枝：用于剪去该节点的值在对应分支中，已经被使用的情况，可以定义一个 check[ ] 紫色剪枝：perm[i] 不能够被 i 整除，i 不能够被 per…...
Perl语言的语法
Perl语言概述及其应用 引言 Perl语言是一种通用的高级编程语言，由拉里沃尔（Larry Wall）于1987年首次发布。Perl语言的设计目标是简化文本处理和报告生成，同时也提供了强大的功能以用于系统管理、网络编程、数据库交互等多种场景…...
ELK+filebeat+kafka
ELKfilebeatkafka elkelk的架构数据流向ELK的部署 filebeatzookeeperkafkazopkeeprzookeeper的工作机制zookeeper的特点zookeeper的数据架构zookeeper的安装 kafka消息队列消息队列的应用场景消息队列的模式kafka组件的名称 elk elk的架构 elk：统一日志收集系统 …...
WPF系列九：图形控件EllipseGeometry
简介 EllipseGeometry用于绘制一个椭圆的形状。它通常与其他图形元素结合使用，比如 Path 或者作为剪切区域来定义其他元素的外形。 定义椭圆：EllipseGeometry 用来定义一个椭圆或者圆的几何形状。参与绘制：可以被用作 Path 元素的数据&…...
2025新年源码免费送
2025很开门很开门的源码免费传递。不需要馒头就能获取4套大开门源码。 听泉偷宝，又进来偷我源码啦👊👊👊。欢迎偷源码 🔥🔥🔥 获取免费源码以及更多源码，可以私信联系我 我们常常…...
离线录制激光雷达数据进行建图
目前有一个2D激光雷达，自己控制小车运行一段时间，离线获取到激光雷达数据后运行如下代码进行离线建图。 roslaunch cartographer_ros demo_revo_lds.launch bag_filename:/home/firefly/AutoCar/data/rplidar_s2/2025-01-08-02-08-33.bag实际效果如下 d…...
Scala分布式语言二（基础功能搭建、面向对象基础、面向对象高级、异常、集合）
章节3基础功能搭建 46.函数作为值三 package cn . itbaizhan . chapter03 // 函数作为值，函数也是个对象 object FunctionToTypeValue { def main ( args : Array [ String ]): Unit { //Student stu new Student() /*val a ()>{"GTJin"…...
AI中的神经元与权重矩阵之间的关系；神经元连接角度看行和列的意义
AI中的神经元与权重矩阵之间的关系 目录 AI中的神经元与权重矩阵之间的关系神经元连接角度看行和列的意义AI中的神经元概念 在人工智能领域，特别是神经网络中，神经元是基本的计算单元，它是对生物神经元的一种抽象模拟。就像生物神经元接收来自其他神经元的电信号，经过处理后…...
前端中常用的单位度量（px,rpx,rem,em,vw,vh）+图片自适应
文章目录 前端中常用的单位度量vw/vh 的场景应用px/rem/em 之间的转换关系项目中的rem 应用根元素 font-size 设置为16px 的应用惯例自适应之图片应用1. 使用 max-width 和 max-height2. 使用 object-fit 属性3. 使用 background-image 模拟图片展示 前端中常用的单位度量 px&…...
Attention计算中的各个矩阵的维度都是如何一步步变化的？
在Transformer模型中，各个矩阵的维度变化是一个关键的过程，涉及到输入、编码器、解码器和输出等多个阶段。以下是详细的维度变化过程： 输入阶段 输入序列：假设输入序列的长度为seq_len，每个单词或标记通过词嵌入&…...
Golang学习笔记_23——error补充
Golang学习笔记_20——error Golang学习笔记_21——Reader Golang学习笔记_22——Reader示例 文章目录 error补充1. 基本错误处理2. 自定义错误3. 错误类型判断3.1 类型断言3.2 类型选择 4. panic && recover 源码 error补充 1. 基本错误处理 在Go中，函数…...
DB-Engines Ranking 2025年1月数据库排行
DB-Engines Ranking 2025年1月数据库排行 DB-Engines排名根据数据库管理系统的受欢迎程度进行排名。排名每月更新一次。 2025年1月，共有423个数据库进入排行。 排行榜 Oracle Oracle 连续三月稳居榜首，排名稳定。2025 年 1 月分数较上月增 5.03&#x…...
积分与签到设计
积分 在交互系统中，可以通过看视频、发评论、点赞、签到等操作获取积分，获取的积分又可以参与排行榜、兑换优惠券等，提高用户使用系统的积极性，实现引流。这些功能在很多项目中都很常见，关于功能的实现我的思路如下。 …...
用 Python 绘制可爱的招财猫
✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ 招财猫，也被称为“幸运猫”，是一种象征财富和好运的吉祥物，经常…...
用 HTML5 Canvas 和 JavaScript 实现炫酷跨年烟花特效
一、引言 跨年夜，五彩斑斓、绚丽绽放的烟花是最令人期待的视觉盛宴之一。在网页端，我们能否通过技术手段复现这一梦幻场景呢？答案是肯定的。本文将深入剖析一段使用 HTML5 Canvas 和 JavaScript 实现的跨年烟花特效源码，带你领略前端技术创造的惊艳画面。 用 HTML5 Canvas…...
什么是数据湖？大数据架构的未来趋势
💖 欢迎来到我的博客！ 非常高兴能在这里与您相遇。在这里，您不仅能获得有趣的技术分享，还能感受到轻松愉快的氛围。无论您是编程新手，还是资深开发者，都能在这里找到属于您的知识宝藏，学习和成长…...
Spring boot接入xxl-job
Spring boot接入xxl-job 导入maven包加入配置增加配置类创建执行器类（写job的业务逻辑）去控制台中配置job 导入maven包 <dependency><groupId>com.xuxueli</groupId><artifactId>xxl-job-core</artifactId><version>…...
Flutter pubspec.yaml 使用方式
Flutter pubspec.yaml 使用方式 pubspec.yaml 是 Flutter 项目中最重要的配置文件之一，用于管理应用的基本信息、依赖项、资源以及构建配置等内容。 1. 基本结构和字段 基本信息 name: my_flutter_app # 应用的名称 description: A new Flutter project …...
Elixir语言的学习路线
Elixir语言的学习路线 Elixir是一种动态、通用的编程语言，特别适合用于构建可扩展和维护性强的应用程序。它基于Erlang虚拟机（BEAM），因其高并发性和容错能力而广受欢迎。近年来，Elixir在Web开发（特别是与P…...
看不懂scatter、gather的来
1.torch.scatter 这是out-of-place版本（相对于in-place版本），它会返回一个新的张量。 torch.Tensor.scatter_ 就是in-place版本，它直接修改自身，返回的也是自身 Tensor.scatter_(dim, index, src, *, reduceNone) →…...
系统思考—问题分析
爱因斯坦说过：“如果我有1小时拯救世界，我会花55分钟去确认问题为何，只用5分钟寻找解决方案。” 这个看似简单的道理，却蕴藏着解决复杂问题的智慧。真正的问题，往往隐藏在现象的背后。解决问题的关键，不在…...
【C】编译与链接
在本文章里面，我们讲会讲解C语言程序是如何从我们写的代码一步步变成计算机可以执行的二进制指令，并最终执行的。C语言程序运行主要包括两大步骤 -- 编译和链接，接下来我们就来一一讲解。 目录 1 翻译环境和运行环境 2 翻译环境 1&#…...
如何用Python编程实现自动整理XML发票文件
传统手工整理发票耗时费力且易出错，而 XML 格式发票因其结构化、标准化的特点，为实现发票的自动化整理与保存提供了可能。本文将详细探讨用python来编程实现对 XML 格式的发票进行自动整理。 一、XML 格式发票的特点 结构化数据：XML 格式发票…...
深入探索OceanBase分布式数据库理论：开启数据管理新篇章
《深入探索OceanBase分布式数据库理论：开启数据管理新篇章》 在当今数字化转型风起云涌的时代，数据已然成为企业最为宝贵的资产之一。随着数据量呈爆炸式增长、业务场景愈发复杂多元，传统的集中式数据库在应对高并发、海量数据存储与处理时逐…...
如何用VS调试不属于解决方案的EXE和DLL程序-使用PDB和EXE文件-根据exe|pdb|源码文件进行调试分析
文章目录 1.问题2.基本点3.方法步骤3.1.新建一个空的解决方案3.2.构建源码项目3.3.添加pdb文件目录3.4.调试目标exe 4.源码断点 1.问题 如果你手里有一个现成的EXE, 以及EXE相关联PDB文件, 还有相关联的CPP文件和H文件. 你如何用VS调试? (当然你可以选择WinDbg.不过这里就讨论…...
2. CSS的元素显示模式
2.1什么是元素显示模式 作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的额特点可以更好的布局我们的网页。 元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行…...
marktext 开源markdown安装
https://github.com/marktext/marktext 该 markdown 的免费安装， 在mac os 上 安装时， 出现无法安装的情况 使用如下的命令可以， 可以进行使用 https://github.com/marktext/marktext/issues/2983 This isn’t the recommended command si…...
/src/utils/request.ts：axios 请求封装，适用于需要统一处理请求和响应的场景
文章目录 数据结构解释1. 核心功能2. 代码结构分析请求拦截器响应拦截器 3. 改进建议4. 总结 console.log(Intercepted Response:, JSON.stringify(response));{"data": {"code": 0,"msg": "成功","data": {"id":…...
蓝桥杯 第十五届 研究生组 B题 召唤数学精灵
问题描述： 数学家们发现了两种用于召唤强大的数学精灵的仪式，这两种仪式分别被称为累加法仪式 A(n) 和累乘法仪式 B(n)。累加法仪式 A(n) 是将从 1 到 n 的所有数字进行累加求和，即：A(n)12⋯n累乘法仪式 B(n) 则是将从 1 到 n 的所…...
四种编译方式（make、cmake、configure、autogen.sh）
文章目录 一、make特征编译步骤（make）样例编译二、cmake特征编译步骤（cmake --> make）样例编译三、configure特征编译步骤（./configure --> make）样例编译四、autogen.sh特征编译步骤（./autogen.sh --> ./configure --> make）样例编译总结一、make 特征 …...
Cursor 实战技巧：好用的提示词插件Cursor Rules
你好啊，见字如面。感谢阅读，期待我们下一次的相遇。 最近在小红书发现了有人分享这款Cursor提示词的插件，下面给各位分享下使用教程。简单来说Cursor Rules就是可以为每一个我们自己的项目去配置一个系统级别的提示词，这样在我们…...
mysql事务及隔离机制
mysql总结 mysql事务特性： 原子性（Atomicity）一致性（Consistency）隔离性（Isolation）持久性（Durability） 并发访问数据库造成的问题： 脏读：读到…...
《护网行动与数字时代：如何应对日益复杂的网络威胁？》
什么是护网 1.什么是护网行动 护网行动是由公安部牵头组织的网络安全攻防演练活动，旨在评估和提升企事业单位的网络安全防护能力。 具体来说，护网行动通过模拟真实的网络攻击场景，组织攻防双方进行对抗演练，以检测企事业单位网…...
1月9日星期四今日早报简报微语报早读
1月9日星期四，农历腊月初十，早报#微语早读。 1、上海排查47家“俄罗斯商品馆”：个别店铺被责令停业，立案调查； 2、西藏定日县已转移受灾群众4.65万人，检测到余震646次； 3、国家发改委&#x…...