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

本章介绍

本章主要介绍 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 的数组,并且放入数据,数据为当前时间戳
  @State
  data: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 {

  // 定义数据
  @State
  data:number[] = new Array(30).fill(Date.now())
  // 定义刷新状态 flag
  @State
  private refreshingFlag: boolean = false;
  // 自定义下刷新页面
  @Builder
  private 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 {

  @State
  data:number[] = new Array(30).fill(Date.now())

  @State
  private refreshingFlag: boolean = false;
  // 判断滚动条是否触底
  @State
  private isEnd: boolean = false;
  // 使用Scroller对象
  scroller: Scroller = new Scroller();

  @Builder
  private 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 = false
          this.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学习文档

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MR30分布式 IO 模块:硅晶行业电池片导片机的智能 “心脏”

硅晶产业作为全球能源和电子领域的基石,其生产规模庞大且工艺复杂。从硅料的提纯、拉晶,到硅片的切割、电池片的制造,每一个环节都要求高精度与高稳定性。在电池片生产环节,导片机承担着硅片传输与定位的重要任务,其运…

MAC虚拟机上安装WDA环境

MAC虚拟机上安装WDA环境 一、MAC虚拟机切换root权限二、macOS上安装xcode若你的macOS系统可以在appstore下载安装若你安装的macOS系统版本太低,无法在appstore上安装xcode 三、macOS上安装WebDriverAgent四、使用xcode配置WDA安装到手机上高版本系统支持 一、MAC虚拟…

个人ffmpeg笔记(一)

环境安装 QT环境安装 运行qt…run安装 下载地址:https://download.qt.io/archive/qt/ 下载地址:https://download.qt.io/archive/qt/5.12/5.12.10/ sudo apt install --reinstall libxcb-xinerama0 解决xcb问题 Ubuntu16.04打开Qt显示/home/user/.co…

【网络】传输层协议UDP/TCP网络层IP数据链路层MACNAT详解

主页:醋溜马桶圈-CSDN博客 专栏:计算机网络原理_醋溜马桶圈的博客-CSDN博客 gitee:mnxcc (mnxcc) - Gitee.com 目录 1.传输层协议 UDP 1.1 传输层 1.2 端口号 1.3 UDP 协议 1.3.1 UDP 协议端格式 1.3.2 UDP 的特点 1.3.3 面向数据报 1…

WordPress插件 Download-block-plugin下载按钮图标美化

WordPress插件 Download-block-plugin下载按钮图标美化

分布式 漏桶算法 总结

前言 相关系列 《分布式 & 目录》《分布式 & 漏桶算法 & 总结》《分布式 & 漏桶算法 & 问题》 概述 简介 LBA Leaky Bucket Algorithm 漏桶算法是一种流行于网络通信领域的流量控制/频率限制算法。漏桶算法的核心原理是通过一个概念上的“漏桶”来…

04面向对象篇(D4_OOT(D1_OOT - 面向对象测试))

目录 一、 面向对象影响测试 1. 封装性影响测试 2. 继承性影响测试 3. 多态性影响测试 二、 面向对象测试模型 三、 面向对象分析测试 1. 对象测试 2. 结构测试 3. 主题测试 4. 属性和实例关联测试 5. 服务和消息关联测试 四、面向对象设计测试 1. 对认定类测试 …

群控系统服务端开发模式-应用开发-前端操作记录功能展示

一、创建操作记录展示视图 在根目录下src文件夹下views文件夹下permission文件夹下创建token文件夹&#xff0c;在token文件夹下&#xff0c;新建index.vue文件&#xff0c;代码如下&#xff1a; <template><div class"app-container"><div class&qu…

【AIGC】如何高效使用ChatGPT挖掘AI最大潜能?26个Prompt提问秘诀帮你提升300%效率的!

还记得第一次使用ChatGPT时&#xff0c;那种既兴奋又困惑的心情吗&#xff1f;我是从一个对AI一知半解的普通用户&#xff0c;逐步成长为现在的“ChatGPT大神”。这一过程并非一蹴而就&#xff0c;而是通过不断的探索和实践&#xff0c;掌握了一系列高效使用的技巧。今天&#…

电容Q值、损耗角、应用

电容发热的主要原因&#xff1a;纹波电压 当电容两端施加纹波电压时&#xff0c;电容承受的是变化的电压&#xff0c;由于电容内部存在寄生电阻&#xff08;ESR&#xff09;和寄生电感&#xff08;ESL&#xff09;.因此电容会有能量损耗&#xff0c;从而产生热量&#xff0c;这…

适配器模式的理解和实践

在软件开发中&#xff0c;我们经常遇到需要将一个类的接口转换成客户端所期望的另一种接口的情况。这种接口不匹配问题会导致类之间的不兼容&#xff0c;使得原本可以协同工作的两个类无法在一起工作。为了解决这一问题&#xff0c;适配器模式&#xff08;Adapter Pattern&…

大数据分析案例-基于梯度提升决策树回归算法构建医疗保险费用预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

轩凯生物被警示,财务内控不规范,华泰证券又被处罚

作者&#xff1a;Tracy 来源&#xff1a;IPO魔女 11月21日&#xff0c;南京轩凯生物科技股份有限公司&#xff08;简称“轩凯生物”&#xff09;被交易所下达书面警示的自律监管函。同时其保荐机构华泰联合证券和会计师事务所天衡&#xff0c;均受到监管处罚。这是今年来&…

IoTDB 常见问题 QA 第二期

关于 IoTDB 的 Q&A IoTDB Q&A 第二期来啦~我们将定期汇总社区讨论频繁的问题&#xff0c;并展开进行详细回答&#xff0c;通过积累常见问题“小百科”&#xff0c;方便大家使用 IoTDB。 Q1&#xff1a;集群扩容方法 问题 问题1&#xff1a;当 IoTDB 集群的存储占用达到…

RT-DETR融合[CVPR2024]Starnet中的star block特征提取模块

RT-DETR使用教程&#xff1a; RT-DETR使用教程 RT-DETR改进汇总贴&#xff1a;RT-DETR更新汇总贴 《Rewrite the Stars》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/abs/2403.19967 代码链接&#xff1a;https://github.com/ma-xu/Rewrite-the-Stars/tree/main 论…

Java web - 后端开发

一 Maven Maven是apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具。 Maven的作用

Unity学习笔记(二)如何制作角色动画

前言 本文为Udemy课程The Ultimate Guide to Creating an RPG Game in Unity学习笔记 创建一个角色 我们的目的是创建一个可移动、跳跃、冲刺等动作的角色 需要的组件&#xff1a;Rigidbody&#xff08;用于创建物理规则&#xff09;、Collider&#xff08;用于检测碰撞&am…

Pytest-Bdd-Playwright 系列教程(16):标准化JSON报告Gherkin格式命令行报告

Pytest-Bdd-Playwright 系列教程&#xff08;16&#xff09;&#xff1a;标准化JSON报告&Gherkin格式命令行报告 前言一、创建Feature文件二、创建步骤定义文件三、生成Cucumber格式的JSON报告四、使用Gherkin格式的命令行报告五、将BDD报告集成到Jenkins中总结 前言 在自动…

harbor镜像仓库搭建

Harbor简介 Harbor的发展背景和现状 Harbor项目起始于2014年左右,当时正值容器技术和微服务架构迅速崛起的时期。随着越来越多的企业开始采用容器化部署应用,对于私有镜像管理的需求也日益增长。传统的解决方案要么缺乏必要的企业级特性(如访问控制、安全性和可扩展性),…

Windows安装Jira

下载 Download Jira Data Center | Atlassian https://product-downloads.atlassian.com/software/jira/downloads/atlassian-jira-software-10.3.0-x64.exe 以管理员身份安装&#xff0c;否则弹出以下提醒 创建和配置MySQL数据库&#xff1a;参照 Connecting Jira applicat…