「HarmonyOS」下拉刷新组件使用详情

前言:在客户端开发过程中,经常会出现下拉刷新的功能,用于重新加载数据和加载更多数据,通过查找相关资料,查找到一个refresh下拉刷新的第三方库,今天主要介绍一下其中比较常用的RefreshLayout形式下拉刷新使用方法

一、组件介绍

Harmony系统其实提供了一个Refresh组件,但是系统的功能与日常的开发,还是存在这个比较大的出入,比较难以满足我们实际的需求,所以我找到了一个开发者写的第三方库
相关链接:HarmonyOS开发:开源一个刷新加载组件

二、引入本地静态共享包har包

1.下载har包,点击下载
2.把har包复制到项目中,目录我这边创建了一个libs目录,复制进去,引入之后,在"oh-package.json5"文件中进行同步项目,点击右上角Sync Now即可
在这里插入图片描述
3.检查是否引入成功
如果引入成功,最终都会在使用的模块中,生成一个oh_modules文件,并创建源代码文件,有则成功,无则失效,如下图:
在这里插入图片描述

三、使用组件

目前库中主要提供的用法有三种。
1.ListView形式,单列表形式
2.GridView形式,网格列表形式
3.RefreshLayout形式,支持任何组件形式,如Column,Row等

在使用下来,个人最喜欢使用第三种形式,这种形式使用起来最为方便和容易实现预期样式,所以本文主要介绍第三种RefreshLayout形式,其他形式介绍可前往组件作者的博客:HarmonyOS开发:开源一个刷新加载组件,进行查看学习

import router from '@ohos.router'
import { NewsBean } from '../../bean/NewsBean'
import { RefreshController, RefreshLayout } from '@app/refresh'
import { HttpApiManager } from '../../http/HttpApiManager'@Entry
@Component
export struct RefreshPage {@State pageNo: number = 1@State refreshController: RefreshController = new RefreshController()@State dataArray: Array<NewsBean> = []build() {Column() {RefreshLayout({controller: this.refreshController,onRefresh: () => {//下拉刷新this.getNewList()},onLoadMore: () => {//上拉加载this.getMoreNewList()}}) {//可以是任何组件 List/Grid/Column/Row/Text/……// 以List举例List() {...}.onScrollIndex((start: number, end: number) => {//必须添加,用于控制下拉和上拉何时展示this.refreshController.markLocation(start, end, this.dataArray.length + 1)})}}}// 重新加载数据getNewList() {// 数组清空this.dataArray = []// 参数重置this.pageNo = 1// 获取数据 每次拿20个HttpApiManager.getInstance().getNewsList('20', this.pageNo.toString()).then((data: Array<NewsBean>) => {this.refreshController.finishRefresh() //关闭下拉刷新this.dataArray = datathis.pageNo++// 如果获取的数组少于20个,说明数据已全部取完了if (data.length < 20) {// 下拉控制器不再加载更多数据this.refreshController.finishLoadMore(true)} else {// 下拉控制器可以加载更多数据this.refreshController.finishLoadMore(false)}}).catch(error => {ToastUtil.getInstance().showToast(error.message)})}// 加载更多数据getMoreNewList() {HttpApiManager.getInstance().getNewsList('20', this.pageNo.toString()).then((data: Array<NewsBean>) => {this.refreshController.finishLoadMore() //关闭上拉加载this.dataArray = this.dataArray.concat(data)this.pageNo++if (data.length < 20) {this.refreshController.finishLoadMore(true)} else {this.refreshController.finishLoadMore(false)}}).catch(error => {ToastUtil.getInstance().showToast(error.message)})}
}

四、效果展示

在这里插入图片描述

五、扩展

由上图可以看出,我在下拉加载器上方还有一个title,整体样式如下图所示,这样的样式实现方法,作者在博客中也有写到,具体是必须使用Stack作为根布局,让头组件覆盖在刷新组件上
在这里插入图片描述

具体代码实现:

build() {Stack() {Column() {// TitleText('汽车资讯').fontColor($r('app.color.smart_24292B')).fontSize(24).fontWeight(FontWeight.Medium).backgroundColor($r('app.color.smart_FFFFFF')).padding({left: 32, top: 16, bottom: 14}).width(BaseUtils.screenWidth).zIndex(1)RefreshLayout({controller: this.refreshController,onRefresh: () => {//下拉刷新this.getNewList()},onLoadMore: () => {//上拉加载this.getMoreNewList()}}) {List() {...}.onScrollIndex((start: number, end: number) => {//必须添加,用于控制下拉和上拉何时展示this.refreshController.markLocation(start, end, this.dataArray.length + 1)}).zIndex(0)}}}}

因为为了代码的可读性,所以我在Title组件和RefreshLayout组件下方分别使用了zIndex属性,让title组件盖在RefreshLayout组件上,以实现样式

参考文档:

HarmonyOS开发:开源一个刷新加载组件

该文章主要介绍了使用程序员一鸣的刷新加载组件库,其github地址为https://github.com/AbnerMing888/HarmonyOsRefresh,认为对您有帮助的话,也帮作者点点Star

总结:

当前HarmonyOs仍在初步学习过程中,大家如果感兴趣或者有问题可以一起沟通交流
如果该文章对你有所帮助的话,可以点赞、收藏并关注一下!后续会持续更新更多技术内容

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

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

相关文章

【设计模式】Java 设计模式之代理模式(Proxy Pattern)

代理模式深入分析 一、概述 代理模式是一种为其他对象提供一种代理以控制对这个对象的访问的设计模式。在某些情况下&#xff0c;一个对象不适合或者不能直接访问另一个对象&#xff0c;而代理对象可以在客户端和目标对象之间起到中介的作用。 代理模式的主要目的是&#xf…

【gpt实践】50个提升工作效率的GPT指令

收集整理了50个工作不同场景中可能会用到的gpt指令&#xff0c;希望对大家有帮助。 1. 用「532规则」定制月度宣传规划 提示&#xff1a;“对于我的 [产品/服务] 在 [社交媒体平台上 ]定位 [我的目标受众]”&#xff0c;使用 5-3-2 规则制定 1 个月的社交媒体内容计划。” Pro…

关于I2C(Inter-Integrated Circuit)死锁及解决措施

I2C&#xff08;Inter-Integrated Circuit&#xff09;死锁是指两个或多个设备&#xff08;比如主设备和从设备&#xff09;在通信过程中&#xff0c;由于某种原因互相等待&#xff0c;导致无法正常进行通信的现象。这种死锁状态可能会导致整个系统的通信受阻&#xff0c;影响设…

K8S日志收集方案-EFK部署

EFK架构工作流程 部署说明 ECK (Elastic Cloud on Kubernetes)&#xff1a;2.7 Kubernetes&#xff1a;1.23.0 文件准备 crds.yaml 下载地址&#xff1a;https://download.elastic.co/downloads/eck/2.7.0/crds.yaml operator.yaml 下载地址&#xff1a;https://download.e…

性能出众的一区新算法|星鸦优化算法NOA原理及代码实现(Matlab)

文章来源于我的个人公众号&#xff1a;KAU的云实验台&#xff0c;主要更新智能优化算法的原理、应用、改进 CEC2005中的测试 本文KAU将介绍一个2023年发表在1区期刊KBS上的优化算法——星鸦优化算法(Nutcracker Optimization Algorithm&#xff0c;NOA)[1] 该算法由Mohamed …

一直被模仿,从未被超越

德国威步以及卓越的创新能力&#xff0c;成为业内不断被模仿的对象。德国威步自1989年创立35年以来&#xff0c;一直坚定地在软件保护及授权管理领域努力耕耘并不断创新和改进&#xff0c;拥抱互联网及软件开发技术的革新&#xff0c;完美融入并发展&#xff0c;虽然被其他竞争…

Github 2024-03-15 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-03-15统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量TypeScript项目3Python项目3非开发语言项目2PHP项目1C#项目1Rust项目1《Hello 算法》:动画图解、一键运行的数据结构与算法教程 创建周期:476…

通过Rothko罗斯科绘画学习CSS盒子

本文章属于学习笔记&#xff0c;在https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/中练习 1、使用 padding 简写属性来增加两个元素之间的空间到。 .canvas {} .frame { padding:50px; }2、overflow 设置为 hidden - 将画布更改回其原始尺寸。overfl…

第十四届“中关村青联杯”全国研究生数学建模竞赛-A题:无人机在抢险救灾中的优化运用(续)

目录 6 问题三模型建立与求解 6.1 问题描述与分析 6.2 模型建立 6.3 模型求解

Discourse 分类图片

我们可以在 Discourse 上为分类添加图片。 进入分类编辑界面&#xff0c;然后选择 Image 标签。 在 Images 标签下&#xff0c;上传分类需要的图片。 图片大小 图片的大小是 Discourse 进行控制的&#xff0c;高度为 150 PX 像素。 如果上传的图片大于 150 px 的高度像素&…

C++ 虚函数与多态

定义宠物类 Pet &#xff0c;包含虚函数 speak &#xff0c;显示 " miao ! miao !"和" wang ! wang !"。 信息" How does a pet speak ?"; 主团数中定义 Pet 、 Cat 和 Dog 的对象&#xff0c;再定义 Pet 指针量 &#xff0c;分别指向 Pet Cat…

人工智能在未来的优势

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是一种模拟人类智能的技术&#xff0c;已经在现代科技中得到广泛应用&#xff0c;并且具有广阔的发展前景12。以下是人工智能在现代科技中的应用和未来发展趋势的介绍&#xff1a; 综上所述&#xff0c;…

零基础入门多媒体音频(2)-音频焦点2

说实话&#xff0c;android的代码是越来越难以阅读。业务函数里面狗皮膏药似的补丁与日俱增。继上篇简要介绍音频焦点的文章&#xff0c;这篇文章的主要内容是分析audiofocus的实现。看了一下午的相关代码都没找到做audiofocus策略的核心逻辑。目前能看懂的大概包含下面两个逻辑…

开源堡垒机Jumpserver安装教程

前言:堡垒机的应用场景 公司内有若干台服务器,既有windows的也有linux的, 提供有ERP,OA,Web,报表等等各种服务,往往需要远程登录到服务器上去做运维,但如果给root或者administrator权限,很容易出现不知道谁操作了的问题.如果不同人设置不同账号,又账号过多,权限不足等等其他问题…

高质量 Git 仓库汇总(持续更新,方便查看)

Leetcode https://github.com/kamyu104/LeetCode-Solutions Cmake https://github.com/viva64/pvs-studio-cmake-examples 3D目标检测 Awesome-3D-Object-Detection Awesome-3D-Object-Detection-for-Autonomous-Driving Cuda Code dbscan https://github.com/l3lackc…

外包就干了2个月,技术退步明显....

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

【计算机视觉】二、图像形成:2、几何基元和几何变换:2D变换

文章目录 一、向量和矩阵的基本运算二、几何基元和变换1、几何基元(Geometric Primitives)2、几何变换(Geometric Transformations)1. 各种变换的关系2. 变换公式3. 2D变换的层次4. python实现 一、向量和矩阵的基本运算 【计算机视觉】二、图像形成&#xff1a;1、向量和矩阵…

echarts绘制 联系词(关键字)

<template><div><div>【关键词条】</div><div ref"target" class"w-full h-full" stylewidth:300px;height:300px></div></div> </template><script setup> import { ref, onMounted,watch } from …

使用docker-compose部署Redis集群

一、部署三主三从的Redis集群 分别为6个节点建立挂载目录&#xff0c;每个目录下建立数据、配置、日志文件夹。 docker-compose内容如下&#xff1a; version: 3 services:redis1:image: redis:6.2.3restart: alwaysports:- "6379:6379"- "16379:16379"v…

融入Facebook的世界:探索数字化社交的魅力

融入Facebook的世界&#xff0c;是一场数字化社交的奇妙之旅。在这个广袤的虚拟社交空间中&#xff0c;人们可以尽情展现自己、分享生活&#xff0c;与全球朋友、家人和同事保持紧密联系&#xff0c;共同探索社交互动的乐趣与魅力。让我们深入了解这个世界的魅力所在&#xff1…