【鸿蒙实战开发】数据的下拉刷新与上拉加载

本章介绍

本章主要介绍 ArkUI 开发中最常用的场景下拉刷新, 上拉加载,在本章中介绍的内容在实际开发过程当中会高频的使用,所以同学们要牢记本章的内容。下面就让我们开始今天的讲解吧!

List 组件

在 ArkUI 中List容器组件也可以实现数据滚动的效果, 这里为什么先介绍 List 组件,因为在本章节介绍的下拉刷新和上拉加载用到了从此组件,所以一起讲解一下。

语法

List(){ListItem(){}
}

注意: 在 List 组件中必须包含 ListItem 子组件才能正常渲染数据,可以理解为每一个 ListItem 对应的就是一条数据。

示例

在这里插入图片描述

@Entry
@Component
struct ListDemoPage {build() {Column() {List() {ListItem() {Row() {Text('测试数据 List')}.padding(10).width('100%')}ListItem() {Row() {Text('测试数据 List')}.padding(10).width('100%')}ListItem() {Row() {Text('测试数据 List')}.padding(10).width('100%')}ListItem() {Row() {Text('测试数据 List')}.padding(10).width('100%')}ListItem() {Row() {Text('测试数据 List')}.padding(10).width('100%')}}.height(100).divider({strokeWidth:1,color:"#ededed"})}.height('100%').width('100%')}
}

我们发现当页面元素超出了List组件设置的高度,屏幕上就会出现滚动条,并且下拉画面数据到顶部的时候,画面整体也会被下拉。并且上述代码有重复代码,这时我们就可以使用上一章节讲解的循环渲染ForEach组件去渲染列表让我们改造一下代码。
在这里插入图片描述

@Entry
@Component
struct ListDemoPage {// 定义一个类型为number,长度为 30 的数组,并且放入数据,数据为当前时间戳@Statedata:number[] = new Array(30).fill(Date.now())build() {Column() {// 使用 List 组件List() {// 循环渲染ForEach(this.data,(item:number)=>{// 必须使用 ListItem 组件进行包裹ListItem() {Row() {Text(item+"")}.padding(10).width('100%')}})}.height('100%').divider({strokeWidth:1,color:"#ededed"})}.height('100%').width('100%')}
}

下面我们实现下拉刷新添加数据

Refresh 组件

Refresh可以进行页面下拉操作并显示刷新动效的容器组件。Refresh子组件会跟随手势下拉而下移。我们使用这个组件将我们上面的代码进行包裹。

语法
Refresh(){}

介绍一下 可以往Refresh组件传递的参数(先介绍两个)

●refreshing:当前组件是否正在刷新。支持双向绑定
●builder:下拉时,自定义刷新样式的组件。可以自定义下拉刷新样式。

下拉刷新

下面让我们使用Refresh组件实现下拉刷新的功能。
示例
在这里插入图片描述

@Entry
@Component
struct ListDemoPage {// 定义数据@Statedata:number[] = new Array(30).fill(Date.now())// 定义刷新状态 flag@Stateprivate refreshingFlag: boolean = false;// 自定义下刷新页面@Builderprivate LoadingCustom() {Stack() {Row() {// Loading 组件LoadingProgress().width(30).color("#4095cb")}}.width('100%')}build() {Column() {// 使用刷新组件Refresh({ refreshing: $$this.refreshingFlag, builder: this.LoadingCustom() }) {List() {ForEach(this.data, (item: number) => {ListItem() {Row() {Text(item + "")}.padding(10).width('100%')}})}.height('100%').divider({ strokeWidth: 1, color: "#ededed" })}// 进入刷新状态时触发回调。这里两后停止刷新状态.onRefreshing(() => {setTimeout(() => {this.refreshingFlag = false}, 2000)})// 设置触发刷新的下拉偏移量。.refreshOffset(64)// 设置当下拉距离超过refreshOffset时是否触发刷新。.pullToRefresh(true)}.height('100%').width('100%')}
}

上述代码中使用@builder 装饰器修饰的内容可以理解为一个子画面,实现了自定义刷新页面,本章先不过多的说@builder 的作用。
现在只需在onRefreshing的方法中新增 List 的数据即可。

 .onRefreshing(() => {setTimeout(() => {this.refreshingFlag = false// 添加数据this.data.push(...Array(30).fill(Date.now()))}, 2000)})

效果:
在这里插入图片描述

如上图所示,每次下拉刷新后画面会新增 30 条数据。

上拉加载

Refresh组件中没有提供上拉加载的功能,我们可以结合 List 组件的事件来实现此功能。
示例
在这里插入图片描述

我们发现当页面的滚动条触底时,会触发加载数据的事件,此时我们需要在代码中知道当前滚动条的状态。

import { promptAction } from '@kit.ArkUI';@Entry
@Component
struct ListDemoPage {@Statedata:number[] = new Array(30).fill(Date.now())@Stateprivate refreshingFlag: boolean = false;// 判断滚动条是否触底@Stateprivate isEnd: boolean = false;// 使用Scroller对象scroller: Scroller = new Scroller();@Builderprivate LoadingCustom() {Stack() {Row() {LoadingProgress().width(30).color("#4095cb")}}.width('100%')}build() {Column() {Refresh({ refreshing: $$this.refreshingFlag, builder: this.LoadingCustom() }) {List() {ForEach(this.data, (item: number) => {ListItem() {Row() {Text(item + "")}.padding(10).width('100%')}})}.height('100%').divider({ strokeWidth: 1, color: "#ededed" })// 当画面能滚动说明没有触底.onScrollStart(() => {this.isEnd = false})// 判断当前是否停止滚动.onScrollStop(() => {// 如果停止滚动并且满足滚动条已经在底部进行数据的加载。if (this.isEnd) {// 加载数据promptAction.showToast({ message: '加载数据' })setTimeout(()=>{this.data.push(...Array(30).fill(Date.now()))// 加载完数据把滚动条移至底部this.scroller.scrollEdge(Edge.Bottom)},1000)}})// 当滚动条触底把 flag 设置成 true.onReachEnd(() => {this.isEnd = true})}.onRefreshing(() => {setTimeout(() => {this.refreshingFlag = falsethis.data.push(...Array(30).fill(Date.now()))}, 2000)}).refreshOffset(64).pullToRefresh(true)}.height('100%').width('100%')}
}

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)文档用来跟着学习是非常有必要的。

这份鸿蒙(HarmonyOS NEXT)文档包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙(HarmonyOS NEXT)5.0最新学习路线

在这里插入图片描述

有了路线图,怎么能没有学习文档呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习文档,请点击→纯血版全套鸿蒙HarmonyOS学习文档

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

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

相关文章

ElasticSearch 常见故障解析与修复秘籍

文章目录 一、ElasticSearch启动服务提示无法使用root用户二、ElasticSearch启动提示进程可拥有的虚拟内存少三、ElasticSearch提示用户拥有的可创建文件描述符太少四、ElasticSearch集群yellow状态分析五、ElasticSearch节点磁盘使用率过高,read_only状态问题解决六…

Motionface RTASR 离线实时语音识别直播字幕使用教程

软件使用场景: 直播、视频会议、课堂教学等需要实时字幕的场景。 1:系统要求 软件运行支持32位/64位windows 10/11系统,其他硬件要求无,无显卡也能实时识别字幕。 2:下载安装 链接:百度网盘 请输入提取码 提取码&#…

Https身份鉴权(小迪网络安全笔记~

附:完整笔记目录~ ps:本人小白,笔记均在个人理解基础上整理,若有错误欢迎指正! 5.2 Https&身份鉴权 引子:上一篇主要对Http数据包结构、内容做了介绍,本篇则聊聊Https、身份鉴权等技术。 …

Linux 中的 mkdir 命令:深入解析

在 Linux 系统中,mkdir 命令用于创建目录。它是文件系统管理中最基础的命令之一,广泛应用于日常操作和系统管理中。本文将深入探讨 mkdir 命令的功能、使用场景、高级技巧,并结合 GNU Coreutils 的源码进行详细分析。 1. mkdir 命令的基本用法…

【实验】【H3CNE邓方鸣】交换机端口安全实验+2024.12.11

实验来源:邓方鸣交换机端口安全实验 软件下载: 华三虚拟实验室: 华三虚拟实验室下载 wireshark:wireshark SecureCRT v8.7 版本: CRT下载分享与破解 文章目录 dot1x 开启802.1X身份验证 开启802.1X身份验证,需要在系统视图和接口视…

OpenCV实验篇:识别图片颜色并绘制轮廓

第三篇:识别图片颜色并绘制轮廓 1. 实验原理 颜色识别的原理: 颜色在图像处理中通常使用 HSV 空间来表示。 HSV 空间是基于人类视觉系统的一种颜色模型,其中: H(Hue):色调,表示颜色…

vue2-请求代理,动态target

当你在 Vue 2 项目中将 axios 的 baseURL 配置为 http://192.168.11.111:8762 时,所有请求都被认为是绝对路径请求,这种请求会直接发送到目标服务器, 跳过开发服务器的代理。 baseURL具体值 这就是为什么代理配置无法拦截 /exportPdf 的原因…

算法-字符串-76.最小覆盖子串

一、题目 二、思路解析 1.思路: 滑动窗口!!! 2.常用方法: 无 3.核心逻辑: 1.特殊情况:s或t是否为空字符串 if(snull||tnull)return ""; 2.声明一个字符数组——用于记录对应字符出现…

【Unity技巧】如何设置屏幕最小宽度

在 Unity 中,设置屏幕最小宽度可以通过调整 Canvas 的 CanvasScaler 组件来控制 UI 元素的缩放,并确保 UI 在不同屏幕宽度下始终能保持适当的布局。 不过,如果你想要限制游戏的实际窗口宽度,通常是通过代码来实现的。例如&#x…

基于softmax回归的多分类

基于softmax回归的多分类任务是机器学习领域中的一种常见应用。softmax回归,又称多项逻辑回归或多类逻辑回归,是逻辑回归在多分类问题上的推广。以下是对基于softmax回归的多分类任务的详细解释: 一、softmax回归的原理 softmax回归的核心思想是通过softmax函数将输入数据…

BatchNorm 与 LayerNorm

文章目录 1. BatchNorm批量归一化2. LayerNorm层归一化3. BatchNorm 和 LayerNorm 对比4. BatchNorm 和 LayerNorm 怎么选择References 今天重看Transformer,发现里面提到了BatchNorm和LayerNorm两种归一化方法,在这儿做一下总结和整理。 1. BatchNorm批…

《机器学习》2.4假设检验 t分布 F分布

目录 t发布 注意是这个东西服从t分布 数据服从t分布通常是在以下情况下: 以下是一些具体的例子,说明在何种情况下数据会服从t分布: t检验 交叉验证t检验 样本方差​编辑 F分布(fisher Friedman检验是一种非参数统计方法&a…

java aspose word 模板根据数据导出pdf

支持以功能&#xff1a; 1、字符串占位符替换。 2、占位符循环替换。 3、图片替换。 4、基础图标&#xff0c;折现、饼图、柱状图。 本案例运行环境&#xff1a; 1、aspose word21.1版本。 2、jdk 18。 话不多说直接上代码。 <!-- 图表相关 --><dependency><gro…

Go 语言结构

Go 语言结构 Go 语言,也称为 Golang,是一种由 Google 开发和支持的静态类型、编译型编程语言。它于 2009 年首次发布,旨在提高多核处理器、网络资源和大型代码库的性能。Go 语言以其简洁的语法、并发支持和强大的标准库而闻名,特别适合构建高性能的网络服务和分布式系统。…

安装与认识wireshark

免责声明 学习视频来自B 站 up 主泷羽 sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下代码、网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 Wireshark安装入门之软件…

Linux高性能服务器编程 | 读书笔记 |9.定时器

9. 定时器 网络程序需要处理定时事件&#xff0c;如定期检测一个客户连接的活动状态。服务器程序通常管理着众多定时事件&#xff0c;有效地组织这些定时事件&#xff0c;使其在预期的时间被触发且不影响服务器的主要逻辑&#xff0c;对于服务器的性能有至关重要的影响。为此&…

如何使用PHP和phpSpider搭建强大的爬虫系统

要使用PHP和phpSpider搭建一个强大的爬虫系统&#xff0c;可以按照以下步骤进行&#xff1a; 一、安装PHP环境 下载PHP&#xff1a;可以通过PHP的官方网站下载最新版本的PHP安装包。安装PHP&#xff1a;根据操作系统的不同&#xff0c;按照官方文档或安装向导进行安装。安装完…

边界层气象:脉动量预报方程展开 | 湍流脉动速度方差预报方程 | 平均湍流动能收支方程推导

写成分量形式 原始式子&#xff1a; ∂ u i ′ ∂ t u ‾ j ∂ u i ′ ∂ x j u j ′ ∂ u ‾ i ∂ x j u j ′ ∂ u i ′ ∂ x j − 1 ρ ‾ ⋅ ∂ p ′ ∂ x i g θ v ′ θ ‾ v δ i 3 f ϵ i j 3 u j ′ v ∂ 2 u i ′ ∂ x j 2 ∂ ( u i ′ u j ′ ‾ ) ∂ x j…

QT 国际化(翻译)

QT国际化&#xff08;Internationalization&#xff0c;简称I18N&#xff09;是指将一个软件应用程序的界面、文本、日期、数字等元素转化为不同的语言和文化习惯的过程。这使得软件能够在不同的国家和地区使用&#xff0c;并且可以根据用户的语言和地区提供本地化的使用体验。…

onnx graph surgeon 的使用详解

文章目录 1. onnx graph surgeon 介绍1.1 作用1.2 onnx-surgeon vs onnx.helper1.2.1 结构对比1.2.2 使用的对比1.3 graph surgeon的使用1.3.1 创建onnx1.3.2 导出子图1.3.3 替换算子2. 案例实战2.1 案例1:onnx创建2.2 案例2:onnx 创建2.3 案例3:子图的提取2.4 案例4:算子替…