HarmonyOS 鸿蒙 ArkTs(5.0.1 13)实现Scroll下拉到顶刷新/上拉触底加载,Scroll滚动到顶部
HarmonyOS 鸿蒙 ArkTs(5.0.1 13)实现Scroll下拉到顶刷新/上拉触底加载
效果展示
使用方法
import LoadingText from "../components/LoadingText"
import PageToRefresh from "../components/PageToRefresh"
import FooterBar from "../components/FooterBar"
class PageToRefreshController {onScrollTop = () => {}
}
@Entry
@Component
struct Index {//滚动回顶部方法startprivate PageToRefreshRef = new PageToRefreshController();onScrollTop(){this.PageToRefreshRef.onScrollTop()}//滚动回顶部方法endonSearch() {// 刷新数据this.loading = true;setTimeout(()=>{this.loading = false;this.simpleList = [1, 2, 3, 4, 5,6,7,8,9,10,11,12,13,14,15]},1000)}onReachBottom(){// 触底加载if(!this.finish){this.loading = true;setTimeout(()=>{this.loading = false;this.finish = true;this.simpleList = this.simpleList.concat([16,17,15,19,20,21,22,23,24,25,26,27,28,29,30])},1000)}}// 判断是否需要显示滚动到顶部的按钮(scroll滚动的位置)@State scrollY:number = 0;// 数据@State simpleList: Array<number> = [1, 2, 3, 4, 5,6,7,8,9,10,11,12,13,14,15];@State loading:boolean = false;@State finish:boolean = false;build() {Stack({ }) {Flex({ direction: FlexDirection.Column }) {// 顶部Column(){// 自定义顶部的组件Text('顶部标题').fontColor(0xffffff).fontSize(14)}.width('100%').padding(10).flexShrink(0).backgroundColor(0xFC5531).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])// 内容Stack(){//调用组件PageToRefresh({controller: this.PageToRefreshRef, scrollY: this.scrollY, refreshPull: () => {this.onSearch()}, reachBottom: () =>{this.onReachBottom()}}){Column(){Row(){// 自定义内容Text('这里可以定义滚动后固定在顶部的内容').fontColor(0xffffff).fontSize(14)}.width('100%').height(50).backgroundColor(0x232020).justifyContent(FlexAlign.Center)List() {ForEach(this.simpleList, (item: number, index: number) => {ListItem(){Row(){Text(item.toString()).fontColor(0xffffff).fontSize(24)}.width('100%').height(80).backgroundColor(0x1BA035).margin({bottom: 10}).justifyContent(FlexAlign.Center)}}, (item: number) => item.toString())ListItem(){LoadingText({loading: this.loading, finish: this.finish, onPullData: () => {//点击直接加载数据this.onReachBottom()}})}}}.alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Start).constraintSize({minHeight: '100%'})}if(this.scrollY >= 50){Row(){Text('我已经固定在顶部啦').fontColor(0xffffff).fontSize(14)}.position({x:0,y:0}).width('100%').height(50).backgroundColor(0x232020).justifyContent(FlexAlign.Center)}}.flexGrow(1).flexShrink(1)//你自定义的底部tabbar组件(仅供示例)FooterBar({scrollTop: this.scrollY >= 500, //判断是否显示滚动到顶部onGoTop: () => {//点击滚动到顶部的方法this.onScrollTop();}}).flexShrink(0)}.width('100%').height('100%')}}
}
新建PageToRefresh 组件
import LoadingText from "./LoadingText"
class PageToRefreshController {onScrollTop = () => {}
}
@Component
export default struct PageToRefresh {refreshPull?: () => voidreachBottom?: () => voidscroller: Scroller = new Scroller()private controller: PageToRefreshController = new PageToRefreshController();aboutToAppear() {if (this.controller) {this.controller.onScrollTop = this.onScrollTop;}}private onScrollTop = () => {//滚动回顶部this.scroller.scrollTo({ xOffset: 0, yOffset: 0, animation: { duration: 1000, curve: Curve.Ease } })}@Link scrollY: numberprivate currentOffsetY: number = 0;@State refreshStatus: boolean = false;@State refreshText: string = '正在刷新';@State pullUpText: string = '正在加载';@State isRefreshing: boolean = false;@State isCanLoadMore: boolean = false;@State ArrData: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];@State newArr: string [] = ['10', '11']putDownPullUpRefresh(event?: TouchEvent): void {if (event === undefined) {return;}switch (event.type) {case TouchType.Down:this.currentOffsetY = event.touches[0].y;break;case TouchType.Move:let isDownPull = event.touches[0].y - this.currentOffsetY > 50;if (isDownPull && this.isCanLoadMore === false && this.scrollY <= 20) {this.refreshStatus = true;}if(this.scroller.isAtEnd()){console.log('滚动到底部')this.isCanLoadMore = true;}break;case TouchType.Cancel:break;case TouchType.Up:if (this.refreshStatus) {console.log('下拉刷新')this.refreshStatus = false;if(this.refreshPull) this.refreshPull();}if (this.isCanLoadMore) {console.log('上拉加载')this.isCanLoadMore = false;if(this.reachBottom) this.reachBottom();}break;default:break;}}@BuilderputDown() {Row() {LoadingText({loading: true, finish: false, loadingText: this.refreshText})}.justifyContent(FlexAlign.Center).width('100%')}@BuilderPullUp() {Row() {LoadingText({loading: true, finish: false, loadingText: this.pullUpText})}.justifyContent(FlexAlign.Center).width('94%').height('5%')}@Builderslot() {Stack(){}.flexShrink(0)};@BuilderParam component: () => void = this.slot;build() {Column() {Scroll(this.scroller) {Column() {if (this.refreshStatus) {this.putDown()}this.component();}}.width('100%').onWillScroll(() => {this.scrollY = this.scroller.currentOffset().yOffset;}).onTouch((event?: TouchEvent) => {this.putDownPullUpRefresh(event);})}.width('100%').height('100%').backgroundColor(0xf4f4f4)}
}
加载文字
@Component
export default struct LoadingText {onPullData?: () => void@Prop loadingText: string = "加载中...";@Prop loading: boolean = false;@Prop finishText: string = "- 我是有底线的 -";@Prop finish: boolean = false;build() {Row() {if(this.loading){LoadingProgress().width(20).height(20).margin({ right: 10 }).color(0x999999)Text(this.loadingText).fontSize(12).fontColor(0x999999).margin({left: 4})}else if(this.finish){Text(this.finishText).fontSize(12).fontColor(0x999999)}else{Text("轻轻上拉加载更多").fontSize(12).fontColor(0x999999).onClick(()=>{if (this.onPullData) {this.onPullData()}})}}.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).width('100%').height(24)}
}
相关文章:
HarmonyOS 鸿蒙 ArkTs(5.0.1 13)实现Scroll下拉到顶刷新/上拉触底加载,Scroll滚动到顶部
HarmonyOS 鸿蒙 ArkTs(5.0.1 13)实现Scroll下拉到顶刷新/上拉触底加载 效果展示 使用方法 import LoadingText from "../components/LoadingText" import PageToRefresh from "../components/PageToRefresh" import FooterBar from "../components/…...
第27章 汇编语言--- 设备驱动开发基础
汇编语言是低级编程语言的一种,它与特定的计算机架构紧密相关。在设备驱动开发中,汇编语言有时用于编写性能关键的部分或直接操作硬件,因为它是接近机器语言的代码,可以提供对硬件寄存器和指令集的直接访问。 要展开源代码详细叙…...
sosadmin相关命令
sosadmin命令 以下是本人翻译的官方文档,如有不对,还请指出,引用请标明出处。 原本有个对应表可以跳转的,但是CSDN的这个[](#)跳转好像不太一样,必须得用html标签,就懒得改了。 sosadmin help 用法 sosadm…...
【git】-初始git
学习资源推荐- 标签管理 - Git教程 - 廖雪峰的官方网站 一、什么是版本控制? 二、Git的安装 三、掌握Linux常用命令 四、Git基本操作 1、提交代码 2、查看历史提交 3、版本回退 一、什么是版本控制? 版本控制是一种用于记录文件或项目内容变化的系…...
JAVA之单例模式
单例模式(Singleton Pattern)是一种设计模式,用于确保一个类只有一个实例,并提供一个全局访问点来获取该实例。在软件设计中,单例模式常用于控制对资源的访问,例如数据库连接、线程池等。以下是单例模式的详…...
无人机数据集,支持YOLO,COCO json,PASICAL VOC xml格式的标注,正确识别率可达到95.7%,10000张原始图片
无人机数据集,支持YOLO,COCO json,PASICAL VOC xml格式的标注,正确识别率可达到95.7%,10000张原始图片 下载地址: 标注好的数据集下载地址: yolo v11: https://download.csdn.net/download/p…...
Linux:进程概念(三.详解进程:进程状态、优先级、进程切换与调度)
目录 1. Linux中的进程状态 1.1 前台进程和后台进程 运行状态 睡眠状态 磁盘休眠状态 停止状态 kill指令—向进程发送信号 死亡状态 2. 僵尸进程 2.1 僵尸状态 2.2 僵尸进程 2.3 僵尸进程危害 3. 孤儿进程 4. 进程的优先级 概念 查看进程优先级 PRI(…...
stack和queue专题
文章目录 stack最小栈题目解析代码 栈的压入弹出序列题目解析代码 queue二叉树的层序遍历题目解析代码 stack stack和queue都是空间适配器 最小栈 最小栈的题目链接 题目解析 minst是空就进栈,或者是val < minst.top()就进栈 代码 class MinStack { public:M…...
一 rk3568 Android 11固件开发环境搭建 (docker)
一 目标 搭建 rk3568 android 系统内核 及固件开发编译调试环境, 支持开发环境导出分享 基于荣品 rk3568 核心板 系统环境: ubuntu22.04 /ubuntu20.04 64位桌面版 编译环境: docker + ubuntu20.04 , 独立的容器隔离环境,不受系统库版本冲突等影响,无性能损耗, 可…...
2025年华数杯国际赛B题论文首发+代码开源 数据分享+代码运行教学
176项指标数据库 任意组合 千种组合方式 14页纯图 无水印可视化 63页无附录正文 3万字 1、为了方便大家阅读,全文使用中文进行描述,最终版本需自行翻译为英文。 2、文中图形、结论文字描述均为ai写作,可自行将自己的结果发给ai,…...
三小时深度学习PyTorch
【对新手非常友好】三小时深度学习PyTorch快速入门!包教会你的! --人工智能/深度学习/pytorch_哔哩哔哩_bilibili从头开始,把概率论、统计、信息论中零散的知识统一起来_哔哩哔哩_bilibili从编解码和词嵌入开始,一步一步理解Trans…...
朴素贝叶斯分类器
一、生成模型(学习)(Generative Model) vs 判别模型(学习)(Discriminative Model) 结论:贝叶斯分类器是生成模型 1、官方说明 生成模型对联合概率 p(x, y)建模&#x…...
商用车电子电气零部件电磁兼容条件和试验(2)—术语和定义
写在前面 本系列文章主要讲解商用车电子/电气零部件或系统的传导抗干扰、传导发射和辐射抗干扰、电场辐射发射以及静电放电等试验内容及要求,高压试验项目内容及要求。 若有相关问题,欢迎评论沟通,共同进步。(*^▽^*) 目录 商用车电子电气…...
SimpleFOC01|基于STM32F103+CubeMX,移植核心的common代码
导言 如上图所示,进入SimpleFOC官网,点击Github下载源代码。 如上图所示,找到仓库。 comom代码的移植后,simpleFOC的移植算是完成一大半。simpleFOC源码分为如下5个部分,其中communication是跟simpleFOC上位机通讯&a…...
物联网之传感器技术
引言 在数字化浪潮席卷全球的今天,物联网(IoT)已成为推动各行各业变革的重要力量。而物联网传感器,作为物联网感知层的核心技术,更是扮演着不可或缺的角色。它们如同人类的五官,能够感知物理世界中的各种信…...
React:构建用户界面的JavaScript库
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
基于TypeScript封装 `axios` 请求工具详解
TypeScript 项目中,封装一个详细的 axios 请求工具可以提高代码的可维护性、可重用性,并让请求逻辑与业务逻辑分离。以下是一个详细的封装示例,包括请求拦截器、响应拦截器、错误处理、以及类型定义。 1. 安装 Axios 首先,确保你…...
ElasticSearch在Windows环境搭建测试
引子 也持续关注大数据相关内容一段时间,大数据内容很多。想了下还是从目前项目需求侧出发,进行相关学习。Elasticsearch(ES)是位于 Elastic Stack(ELK stack) 核心的分布式搜索和分析引擎。Logstash 和 B…...
通信与网络安全管理之ISO七层模型与TCP/IP模型
一.ISO参考模型 OSI七层模型一般指开放系统互连参考模型 (Open System Interconnect 简称OSI)是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型,为开放式互连信息系统提供了一种功能结构的框架。 它从低到高分别是…...
高级运维:shell练习2
1、需求:判断192.168.1.0/24网络中,当前在线的ip有哪些,并编写脚本打印出来。 vim check.sh #!/bin/bash# 定义网络前缀 network_prefix"192.168.1"# 循环遍历1-254的IP for i in {1..254}; do# 构造完整的IP地址ip"$network_…...
三相无刷电机控制|FOC理论04 - 克拉克变换 + 帕克变换的最终目标
导言 通过坐标系旋转,将电机中复杂的三相交流信号映射到与转子磁场同步的旋转参考系中,将动态问题转化为静态问题。这种方法的优点在于: 简化了控制逻辑。实现了转矩Iq和磁通Id的解耦。提供了直流量控制的可能性,大大提高了控制效…...
SAP FICO资产模块各元素基本关系总结
文章目录 【SAP系统研究】 #SAP #FICO #资产会计 ①:每个折旧表包含多个折旧范围,折旧范围用于设置资产的平行折旧,如不同的折旧范围可以更新不同的总账,更新不同的科目等。 ②:折旧表是要分配给公司代码的ÿ…...
Elasticsearch快速入门
Elasticsearch是由elastic公司开发的一套搜索引擎技术,它是elastic技术栈中的一部分,提供核心的数据存储、搜索、分析功能 elasticsearch之所以有如此高性能的搜索表现,正是得益于底层的倒排索引技术。那么什么是倒排索引呢? Elasticsearch…...
【Java数据结构】二叉树相关算法
第一题:获取二叉树中结点个数 得到二叉树结点个数,如果结点为空则返回0,然后再用递归计算左树结点个数根结点(1个)右树结点个数。 public int nodeSize(Node root){if (root null)return 0;return nodeSize1(root.l…...
30分钟内搭建一个全能轻量级springboot 3.4 + 脚手架 <1> 5分钟快速创建一个springboot web项目
快速导航 <1> 5分钟快速创建一个springboot web项目 <2> 5分钟集成好最新版本的开源swagger ui,并使用ui操作调用接口 <3> 5分钟集成好druid并使用druid自带监控工具监控sql请求 <4> 5分钟集成好mybatisplus并使用mybatisplus generator自…...
vue3学习日记6 - Layout
最近发现职场前端用的框架大多为vue,所以最近也跟着黑马程序员vue3的课程进行学习,以下是我的学习记录 视频网址: Day2-17.Layout-Pinia优化重复请求_哔哩哔哩_bilibili 学习日记: vue3学习日记1 - 环境搭建-CSDN博客 vue3学…...
1/14 C++
练习:将图形类的获取周长和获取面积函数设置成虚函数,完成多态 再定义一个全局函数,能够在该函数中实现:无论传递任何图形,都可以输出传递的图形的周长和面积 #include <iostream>using namespace std; class Sh…...
【Uniapp-Vue3】页面生命周期onLoad和onReady
一、onLoad函数 onLoad在页面载入时触发,多用于页面跳转时进行参数传递。 我们在跳转的时候传递参数name和age: 接受参数: import {onLoad} from "dcloudio/uni-app"; onLoad((e)>{...}) 二、onReady函数 页面生命周期函数中的onReady其…...
使用 configparser 读取 INI 配置文件
使用 configparser 读取 INI 配置文件 适合于读取 .ini 格式的配置文件。 配置文件示例 (config.ini): [DEFAULT] host localhost port 3306 [database] user admin password secret import configparser# 创建配置解析器 config configparser.ConfigParser()# 读取配…...
类模板的使用方法
目录 类模板的使用方法 1.类模板语法 2.类模板和函数模板区别 3.类模板中成员函数创建时机 4.类函数对象做函数参数 5.类模板和继承 6.类模板成员函数类外实现 7.类模板分文件编写 person.hpp 实现cpp文件: 8.类模板与友元 9.类模板案例 MyArray.hpp …...
docker mysql5.7如何设置不区分大小写
环境 docker部署,镜像是5.7,操作系统是centos 操作方式 mysql 配置文件是放在 /etc/mysql/mysql.conf.d/mysqld.cnf, vim /etc/mysql/mysql.conf.d/mysqld.cnf lower_case_table_names1 重启mysql容器 验证 SHOW VARIABLES LIKE low…...
Docker与虚拟机的区别及常用指令详解
在现代软件开发中,容器化和虚拟化技术已经成为不可或缺的工具。Docker和虚拟机(VM)是两种常见的技术, 它们都可以帮助开发者在不同的环境中运行应用程序。然而,它们的工作原理和使用场景有很大的不同。本文将详细探讨D…...
C#异步和多线程,Thread,Task和async/await关键字--12
目录 一.多线程和异步的区别 1.多线程 2.异步编程 多线程和异步的区别 二.Thread,Task和async/await关键字的区别 1.Thread 2.Task 3.async/await 三.Thread,Task和async/await关键字的详细对比 1.Thread和Task的详细对比 2.Task 与 async/await 的配合使用 3. asy…...
第一次作业三种方式安装mysql(Windows和linux下)作业
在Windows11上安装sever(服务)端和客户端 server端安装 打开官网MySQL 进入到主页 点击DOWMLOAD 进入下载界面 点击下方MySQL Community (GPL) Downloads 进入社区版mysql下载界面 点击 MySQL Community Server 进入server端下载 选择8.4.3LTS&…...
ubuntu官方软件包网站 字体设置
在https://ubuntu.pkgs.org/22.04/ubuntu-universe-amd64/xl2tpd_1.3.16-1_amd64.deb.html搜索找到需要的软件后,点击,下滑, 即可在Links和Download找到相关链接,下载即可, 但是找不到ros的安装包, 字体设…...
深拷贝与浅拷贝
作者简介: 一个平凡而乐于分享的小比特,中南民族大学通信工程专业研究生在读,研究方向无线联邦学习 擅长领域:驱动开发,嵌入式软件开发,BSP开发 作者主页:一个平凡而乐于分享的小比特的个人主页…...
No one knows regex better than me
No one knows regex better than me 代码分析,传了两个参数zero,first,然后$second对两个所传的参数进行了拼接 好比:?zero1&first2 传入后就是: 12 然后对$second进行了正则匹配,匹配所传入的参数是否包含字符串Yeedo|wa…...
scala基础学习(数据类型)-集合
文章目录 集合创建集合isEmpty获取数据添加元素删除元素常见方法交集 &差集 diff --并集 unionto stringto listto Arrayto Map其余常用方法 集合 Scala Set(集合)是没有重复的对象集合,所有的元素都是唯一的。 Scala 集合分为可变的和不可变的集合。 默认情…...
如何使用 Excel 进行多元回归分析?
多元回归分析,一种统计方法,用来探索一个因变量(即结果变量)与多个自变量(即预测变量)之间的关系。广泛用于预测、趋势分析以及因果关系的分析。 听起来这个方法很复杂,但其实在 Excel 中可以很…...
思维转换:突破思维桎梏,创造更高效的工作与生活
在现代职场和生活中,我们经常面临着各种挑战和问题,有时候虽然付出了很多努力,但依然难以找到更有效的解决方案。这时,或许我们需要的不是更多的努力,而是一次“思维转换”。这一概念看似简单,但它背后却蕴…...
ClickHouse-CPU、内存参数设置
常见配置 1. CPU资源 1、clickhouse服务端的配置在config.xml文件中 config.xml文件是服务端的配置,在config.xml文件中指向users.xml文件,相关的配置信息实际是在users.xml文件中的。大部分的配置信息在users.xml文件中,如果在users.xml文…...
Spring Boot 项目启动后自动加载系统配置的多种实现方式
Spring Boot 项目启动后自动加载系统配置的多种实现方式 在 Spring Boot 项目中,可以通过以下几种方式实现 在项目启动完成后自动加载系统配置缓存操作 的需求: 1. 使用 CommandLineRunner CommandLineRunner 是一个接口,可以用来在 Spring…...
scrapy库解决ja3/tls指纹验证问题
pip install curl_cffi0.7.4 pip install scrapy-fingerprint0.1.3seetings.py打开中间件 DOWNLOADER_MIDDLEWARES { "scrapy_fingerprint.fingerprintmiddlewares.FingerprintMiddleware": 100 }yield scrapy.Request(urlurl,callbackself.parse) 改为以下 from sc…...
二进制、八进制、十进制和十六进制的相互转换
printf 函数 printf 函数是 C 语言中用于将格式化的数据输出到标准输出(通常是屏幕)的函数。它位于 stdio.h 头文件中,因此在使用之前需要包含该头文件。 printf 函数的格式说明符 格式说明符说明示例%d 或 %i输出或输入十进制有符号整数p…...
分布式缓存redis
分布式缓存redis 1 redis单机(单节点)部署缺点 (1)数据丢失问题:redis是内存存储,服务重启可能会丢失数据 (2)并发能力问题:redis单节点(单机)部…...
day08_Kafka
文章目录 day08_Kafka课程笔记一、今日课程内容一、消息队列(了解)**为什么消息队列就像是“数据的快递员”?****实际意义**1、产生背景2、消息队列介绍2.1 常见的消息队列产品2.2 应用场景2.3 消息队列中两种消息模型 二、Kafka的基本介绍1、…...
fbx 环境搭建
python 3.7 3.8 版本支持 https://github.com/Shiiho11/FBX-Python-SDK-for-Python3.x 只有python3.7 https://www.autodesk.com/developer-network/platform-technologies/fbx-sdk-2020-3 scipy安装: python安装scipy_scipy1.2.1库怎么安装-CSDN博客 smpl 2 fbx…...
【大数据】机器学习------神经网络模型
一、神经网络模型 1. 基本概念 神经网络是一种模拟人类大脑神经元结构的计算模型,由多个神经元(节点)组成,这些节点按照不同层次排列,通常包括输入层、一个或多个隐藏层和输出层。每个神经元接收来自上一层神经元的输…...
YOLOv5训练长方形图像详解
文章目录 YOLOv5训练长方形图像详解一、引言二、数据集准备1、创建文件夹结构2、标注图像3、生成标注文件 三、配置文件1、创建数据集配置文件2、选择模型配置文件 四、训练模型1、修改训练参数2、开始训练 五、使用示例1、测试模型2、评估模型 六、总结 YOLOv5训练长方形图像详…...
【Vim Masterclass 笔记11】S06L24 + L25:Vim 文本的插入、变更、替换与连接操作同步练习(含点评课)
文章目录 S06L24 Exercise 06 - Inserting, Changing, Replacing, and Joining1 训练目标2 操作指令2.1. 打开 insert-practice.txt 文件2.2. 练习 i 命令2.3. 练习 I 命令2.4. 练习 a 命令2.5. 练习 A 命令2.6. 练习 o 命令2.7. 练习 O 命令2.8. 练习 j 命令2.9. 练习 R 命令2…...