HarmonyOS引导页登陆页以及tabbar的代码说明 home 下拉刷新页代码 5

下拉刷新页

在这里插入图片描述

代码说明

这一页第一次运行时很卡，就是你点击修改，要等一会才出来，加一句，修改的字样原来应是修车二字。只能将错就错。

const TopHeight = 200;
@Component
export default struct Car {@State list: Array<number> = []// 列表y坐标偏移量@State offsetY: number = 0// 按下的y坐标private downY = 0// 上一次移动的y坐标private lastMoveY = 0// 当前列表首部的索引private startIndex = 0// 当前列表尾部的索引private endIndex = 0// 下拉刷新的布局高度private pullRefreshHeight = 70// 下拉刷新文字：下拉刷新、松开刷新、正在刷新、刷新成功@State pullRefreshText: string= '下拉刷新'// 下拉刷新图标：与文字对应@State pullRefreshImage: Resource = $r("app.media.pullrefresh")// 是否可以刷新：未达到刷新条件，收缩回去private isCanRefresh = false// 是否正在刷新：刷新中不进入触摸逻辑private isRefreshing: boolean = false// 是否已经进入了下拉刷新操作private isPullRefreshOperation = false// 上拉加载的布局默认高度private loadMoreHeight = 70// 上拉加载的布局是否显示@State isVisibleLoadMore: boolean = false// 是否可以加载更多private isCanLoadMore = false// 是否加载中：加载中不进入触摸逻辑private isLoading: boolean = false// 自定义下拉刷新布局@Builder CustomPullRefreshLayout(){Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {Image(this.pullRefreshImage).width(18).height(18)Text(this.pullRefreshText).margin({ left: 7, bottom: 1 }).fontSize(17)}.width('100%').height(this.pullRefreshHeight)// 布局跟着列表偏移量移动.offset({ x: 0, y: `${vp2px(-this.pullRefreshHeight) + this.offsetY}px` })}// 自定义加载更多布局@Builder CustomLoadMoreLayout(){Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {Image($r("app.media.refreshing")).width(18).height(18)Text('加载更多中...').margin({ left: 7, bottom: 1 }).fontSize(17)}.width('100%').height(this.loadMoreHeight).backgroundColor('#f4f4f4').visibility(this.isVisibleLoadMore ? Visibility.Visible : Visibility.None)}// 刷新测试数据private refreshData(){this.list = []for (var i = 0; i < 15; i++) {this.list.push(i)}}// 加载更多测试数据private loadMoreData(){let initValue = this.list[this.list.length-1] + 1for (var i = initValue; i < initValue + 10; i++) {this.list.push(i)}}build() {Column() {// 下拉刷新布局this.CustomPullRefreshLayout()// 列表布局List() {ForEach(this.list, item => {ListItem() {Column() {Text(`Item ${item}`).padding(15).fontSize(18)}}}, item => item.toString())// 加载更多布局ListItem(){this.CustomLoadMoreLayout()}}.backgroundColor(Color.White) // 背景.divider({ color: '#e2e2e2', strokeWidth: 1 }) // 分割线.edgeEffect(EdgeEffect.None) // 去掉回弹效果.offset({ x: 0, y: `${this.offsetY - TopHeight}px` }) // touch事件计算的偏移量单位是px，记得加上单位.onScrollIndex((start, end) => { // 监听当前列表首位索引console.info(`${start}=start============end=${end}`)this.startIndex = startthis.endIndex = end})}.width('100%').height('100%').backgroundColor('#f4f4f4').onTouch((event) => this.listTouchEvent(event))// 父容器设置touch事件，当列表无数据也可以下拉刷新.onAppear(() => {this.refreshData()})}// 触摸事件listTouchEvent(event: TouchEvent){switch (event.type) {case TouchType.Down: // 手指按下// 记录按下的y坐标this.downY = event.touches[0].ythis.lastMoveY = event.touches[0].ybreakcase TouchType.Move: // 手指移动// 下拉刷新中 或 加载更多中，不进入处理逻辑if(this.isRefreshing || this.isLoading){console.info('========Move刷新中，返回=========')return}// 判断手势let isDownPull = event.touches[0].y - this.lastMoveY > 0// 下拉手势 或 已经进入了下拉刷新操作if ((isDownPull || this.isPullRefreshOperation) && !this.isCanLoadMore) {this.touchMovePullRefresh(event)} else {this.touchMoveLoadMore(event)}this.lastMoveY = event.touches[0].ybreakcase TouchType.Up: // 手指抬起case TouchType.Cancel: // 触摸意外中断：来电界面// 刷新中 或 加载更多中，不进入处理逻辑if(this.isRefreshing || this.isLoading){console.info('========Up刷新中，返回=========')return}if (this.isPullRefreshOperation) {this.touchUpPullRefresh()} else {this.touchUpLoadMore()}break}}//============================================下拉刷新==================================================// 手指移动，处理下拉刷新touchMovePullRefresh(event:TouchEvent){// 当首部索引位于0if (this.startIndex == 0) {this.isPullRefreshOperation = true// 下拉刷新布局高度var height = vp2px(this.pullRefreshHeight)// 滑动的偏移量this.offsetY = event.touches[0].y - this.downY// 偏移量大于下拉刷新布局高度，达到刷新条件if (this.offsetY >= height) {// 状态1：松开刷新this.pullRefreshState(1)// 偏移量的值缓慢增加this.offsetY = height + this.offsetY * 0.15} else {// 状态0：下拉刷新this.pullRefreshState(0)}if (this.offsetY < 0) {this.offsetY = 0this.isPullRefreshOperation = false}}}// 手指抬起，处理下拉刷新touchUpPullRefresh(){// 是否可以刷新if (this.isCanRefresh) {console.info('======执行下拉刷新========')// 偏移量为下拉刷新布局高度this.offsetY = vp2px(this.pullRefreshHeight)// 状态2：正在刷新this.pullRefreshState(2)// 模拟耗时操作setTimeout(() => {this.refreshData()this.closeRefresh()}, 2000)} else {console.info('======关闭下拉刷新！未达到条件========')// 关闭刷新this.closeRefresh()}}// 下拉刷新状态// 0下拉刷新、1松开刷新、2正在刷新、3刷新成功pullRefreshState(state:number){switch (state) {case 0:// 初始状态this.pullRefreshText = '下拉刷新'this.pullRefreshImage = $r("app.media.pullrefresh")this.isCanRefresh = falsethis.isRefreshing = falsebreak;case 1:this.pullRefreshText = '松开刷新'this.pullRefreshImage = $r("app.media.reset")this.isCanRefresh = truethis.isRefreshing = falsebreak;case 2:this.offsetY = vp2px(this.pullRefreshHeight)this.pullRefreshText = '正在刷新'this.pullRefreshImage = $r("app.media.refreshing")this.isCanRefresh = truethis.isRefreshing = truebreak;case 3:this.pullRefreshText = '刷新成功'this.pullRefreshImage = $r("app.media.ic_refresh_succeed")this.isCanRefresh = truethis.isRefreshing = truebreak;}}// 关闭刷新closeRefresh() {// 如果允许刷新，延迟进入，为了显示刷新中setTimeout(() => {var delay = 50if (this.isCanRefresh) {// 状态3：刷新成功this.pullRefreshState(3)// 为了显示刷新成功，延迟执行收缩动画delay = 500}animateTo({duration: 150, // 动画时长delay: delay, // 延迟时长onFinish: () => {// 状态0：下拉刷新this.pullRefreshState(0)this.isPullRefreshOperation = false}}, () => {this.offsetY = 0})}, this.isCanRefresh ? 500 : 0)}//============================================加载更多==================================================// 手指移动，处理加载更多touchMoveLoadMore(event:TouchEvent) {// 因为加载更多是在列表后面新增一个item，当一屏能够展示全部列表，endIndex 为 length+1if (this.endIndex == this.list.length - 1 || this.endIndex == this.list.length) {// 滑动的偏移量this.offsetY = event.touches[0].y - this.downYif (Math.abs(this.offsetY) > vp2px(this.loadMoreHeight)/2) {// 可以刷新了this.isCanLoadMore = true// 显示加载更多布局this.isVisibleLoadMore = true// 偏移量缓慢增加this.offsetY = - vp2px(this.loadMoreHeight) + this.offsetY * 0.1}}}// 手指抬起，处理加载更多touchUpLoadMore() {animateTo({duration: 200, // 动画时长}, () => {// 偏移量设置为0this.offsetY = 0})if (this.isCanLoadMore) {console.info('======执行加载更多========')// 加载中...this.isLoading = true// 模拟耗时操作setTimeout(() => {this.closeLoadMore()this.loadMoreData()}, 2000)} else {console.info('======关闭加载更多！未达到条件========')this.closeLoadMore()}}// 关闭加载更多closeLoadMore() {this.isCanLoadMore = falsethis.isLoading = falsethis.isVisibleLoadMore = false}}

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

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

相关文章

​TrustZone之可信固件

​TrustZone之可信固件

Trusted Firmware是Armv8-A设备的安全世界软件的开源参考实现。Trusted Firmware为SoC开发人员和OEM提供了一个符合相关Arm规格&#xff08;包括TBBR和SMCC&#xff09;的参考Trusted代码库。 以下图表显示了Trusted Firmware的结构&#xff1a; SMC调度程序处理传入的SMC。SMC…
阅读更多...
基于html5的演唱会购票系统的设计与实现论文

基于html5的演唱会购票系统的设计与实现论文

基于html5的演唱会购票系统的设计与实现 摘要 随着信息互联网购物的飞速发展&#xff0c;一般企业都去创建属于自己的电商平台以及购物管理系统。本文介绍了基于html5的演唱会购票系统的设计与实现的开发全过程。通过分析企业对于基于html5的演唱会购票系统的设计与实现的需求…
阅读更多...
docker运行java程序的Dockerfile

docker运行java程序的Dockerfile

1&#xff0c;docker运行java程序的Dockerfile # 使用基础镜像 FROM alpine:latest # 暴露容器的端口 不会自动将容器的端口映射到宿主机上 docker run -d -p <宿主机端口>:7080 <镜像名称> EXPOSE 9202 EXPOSE 19202 #下载jdk8 RUN apk update && apk a…
阅读更多...
机器学习之随机森林 python

机器学习之随机森林 python

随机森林是一种集成学习方法&#xff0c;它是由多个决策树组成的模型&#xff0c;其中每棵树都是随机生成的。随机深林包括两种主要类型&#xff1a;随机森林和极端随机树。 废话不说上代码 import numpy as np import matplotlib.pyplot as plt from sklearn.datasets import…
阅读更多...
百模大战下的AI变革：七大趋势引领未来

百模大战下的AI变革：七大趋势引领未来

AI行业的发展正在经历前所未有的变革。随着各大科技公司和初创企业竞相推出各种先进的人工智能模型&#xff0c;AI技术的边界正在不断被突破&#xff0c;新的行业趋势和应用场景也在逐渐浮现。在这场激烈的竞争中&#xff0c;AI行业的新趋势不仅影响着我们如何看待和使用AI&…
阅读更多...
@德人合科技——天锐绿盾 | 图纸加密软件有哪些功能呢?

@德人合科技——天锐绿盾 | 图纸加密软件有哪些功能呢?

德人合科技 | 天锐绿盾加密软件是一款全面保障企业电脑数据和安全使用的加密软件 PC端访问地址&#xff1a;www.drhchina.com 它的功能包括但不限于&#xff1a; 实时操作日志&#xff1a;可以实时详细地记录所有终端的操作日志&#xff0c;包括终端上窗口标题的变换、程序的…
阅读更多...
MySQL数据库利用binlog日志文件恢复数据

MySQL数据库利用binlog日志文件恢复数据

MySQL数据库利用binlog日志文件恢复数据 MySQL数据库利用binlog日志文件恢复数据的步骤主要有以下几种&#xff1a; 1.使用mysqlbinlog工具解析binlog日志文件&#xff0c;生成SQL语句。 2.使用mysql命令行工具执行生成的SQL语句&#xff0c;将数据恢复到目标数据库。 3.使用…
阅读更多...
C++学习笔记（十七）

C++学习笔记（十七）

模板 1. 模板的概念 模板就是建立通用的模具&#xff0c;大大提高复用性 模板的特点&#xff1a; 1. 模板不可以直接使用&#xff0c;它只是一个框架 2. 模板的通用并不是万能的 2. 函数模板 C另一种编程思想称为泛型编程&#xff0c;主要利用的技术就是模板 C提供两种…
阅读更多...
python本地缓存cacheout

python本地缓存cacheout

cacheout地址&#xff1a; https://github.com/dgilland/cacheout 文档地址&#xff1a;https://cacheout.readthedocs.io 简单使用介绍 安装 pip install cacheout 使用 import timefrom cacheout import Cache# 默认的缓存(maxsize)大小为256&#xff0c;默认存活时间(t…
阅读更多...
本地使用 docker 运行OpenSearch + Dashboard + IK 分词插件

本地使用 docker 运行OpenSearch + Dashboard + IK 分词插件

准备基础镜像 注意一定要拉取和当前 IK 分词插件版本一致的 OpenSearch 镜像: https://github.com/aparo/opensearch-analysis-ik/releases 写这篇文章的时候 IK 最新版本 2.11.0, 而 dockerhub 上 OpenSearch 最新版是 2.11.1 如果版本不匹配的话是不能用的, 小版本号对不上…
阅读更多...
11种方法判断​软件的安全可靠性​

11种方法判断​软件的安全可靠性​

软件的安全可靠性是衡量软件好坏的一个重要标准&#xff0c;安全性指与防止对程序及数据的非授权的故意或意外访问的能力有关的软件属性&#xff0c;可靠性指与在规定的一段时间和条件下&#xff0c;软件 软件的安全可靠性是衡量软件好坏的一个重要标准&#xff0c;安全性指与防…
阅读更多...
通讯录应用程序开发指南

通讯录应用程序开发指南

目录 一、前言 二、构建通讯录应用程序 2.1通讯录框架 (1)打印菜单 (2) 联系人信息的声明 (3)创建通讯录 (4)初始化通讯录 2.2功能实现 (1)增加联系人 (2)显示联系人 (3)删除联系人 (4)查找联系人 (5)修改联系人 (6)排序联系人 三、通讯录的优化 3.1 文件存储 …
阅读更多...
Python办公自动化 – 语音识别和文本到语音的转换

Python办公自动化 – 语音识别和文本到语音的转换

Python办公自动化 – 对图片处理和文件的加密解密 以下是往期的文章目录&#xff0c;需要可以查看哦。 Python办公自动化 – Excel和Word的操作运用 Python办公自动化 – Python发送电子邮件和Outlook的集成 Python办公自动化 – 对PDF文档和PPT文档的处理 Python办公自动化 –…
阅读更多...
PhysX——源码编译

PhysX——源码编译

从git下载源码 git主页 https://github.com/NVIDIA-Omniverse/PhysXclone地址 https://github.com/NVIDIA-Omniverse/PhysX.git源码编译 运行PhysX需要两个编译器的支持&#xff0c;CMake 3.12 或以上版本以及Python 2.7.6 版本 进入工程的 physx 目录&#xff0c;运行generate…
阅读更多...
Java将枚举类转为json返回给前端

Java将枚举类转为json返回给前端

Java将枚举类转为json返回给前端 1.后端将枚举类直接返回给前端时只会显示枚举名称2.使用 JsonFormat 注解可以将枚举类转为json再返回给前端。2.1添加maven依赖2.2在枚举类上添加JsonFormat(shape JsonFormat.Shape.OBJECT)2.3编写接口返回给前端 1.后端将枚举类直接返回给前…
阅读更多...
vue中的watcher

vue中的watcher

前言 Vue 中的 watcher 是一种特殊的对象&#xff0c;它可以订阅响应式数据的变化&#xff0c;并在变化时执行相应的回调函数。 Vue 中有三种类型的 watcher&#xff1a; 渲染 watcher 是负责更新视图的 watcher&#xff0c;每个组件实例都有一个对应的渲染 watcher。当组件实…
阅读更多...
『Linux升级路』基础开发工具——gdb篇

『Linux升级路』基础开发工具——gdb篇

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;Linux &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、背景知识介绍 二、gdb指令介绍 一、背景知识介绍 在软件开发中&#xff0c…
阅读更多...
WT2003HX高品质MP3语音芯片，支持立体声输出的应用优势

WT2003HX高品质MP3语音芯片，支持立体声输出的应用优势

在当今的音频处理领域&#xff0c;立体声输出已经成为一项基本的需求。许多电子产品都要求能够支持立体声音效&#xff0c;为用户提供更为沉浸式的音频体验。针对这一市场需求&#xff0c;唯创知音推出了WT2003HX高品质MP3语音芯片&#xff0c;该芯片支持立体声输出&#xff0c…
阅读更多...
Ubuntu 常用命令之 cal 命令用法介绍

Ubuntu 常用命令之 cal 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 cal命令在Ubuntu系统下用于显示日历。它可以显示任何特定月份或整个年份的日历。 cal命令的参数如下 -1&#xff1a;只显示当前月份的日历。-3&#xff1a;显示前一个月、当前月和下一个月的日历。-s&#xff1a;指定日历的开始…
阅读更多...
latex中工具包pdfcrop的使用：pdf自动裁剪

latex中工具包pdfcrop的使用：pdf自动裁剪

这里写自定义目录标题 https://blog.csdn.net/love_ljq/article/details/77604218 很多时候&#xff0c;我们在WORD或者是PPT里画完图之后&#xff0c;需要转换为矢量图&#xff0c;转换为矢量图有很多种方式&#xff0c;有一种方式就是转换为PDF文件&#xff0c;转换为PDF有一…
阅读更多...
最新文章

Copyright @ 2022~2023