HarmonyOS 转场动画 ForEach控制

本文 我们继续说组件的专场特效 上文 HarmonyOS 转场动画 我们通过if控制了转场效果
本文 我们通过 ForEach 控制它的加载和删除
这时候就有人会好奇 ForEach 怎么控制删除呢?
很简单 循环次数不同 例如 第一次 10个 第二次 5个 那么后面的五个就相当于删除啦

我们先编写代码如下

@Entry
@Component
struct Index {@State ArrString:string[] = ["金樽清酒斗十千","飞流直下三千尺","飞流直下三千尺","三河之水天上来"];build() {Column({space: 30}) {ForEach(this.ArrString,(item)=>{Text(item)})}.width('100%').height('100%')}
}

我们就是写了个数组 字符串类型的 然后循环展示所有内容
在这里插入图片描述
我们可以改写代码如下

@Entry
@Component
struct Index {@State ArrString:string[] = ["金樽清酒斗十千","飞流直下三千尺","飞流直下三千尺","三河之水天上来"];build() {Column({space: 30}) {ForEach(this.ArrString,(item)=>{Text(item).transition({type: TransitionType.All,translate: {x:200,y:100 }})})Button("添加").onClick(()=>{animateTo({}, () => {this.ArrString.unshift("凤兮凤兮归故乡");});})}.width('100%').height('100%')}
}

这里 我们渲染列表 组件上加上了 transition 动画绑定
然后 我们给点击事件加上 animateTo 意思 需要动画 unshift 往数组最前面 加一条数据

我们运行代码 然后点击 按钮 显然 它组件移除和进入都有动画了
在这里插入图片描述
这里 我们可以给 ForEach 加上 ,item => JSON.stringify(item)
在这里插入图片描述
比较像vue的for key 让他不要已经有的元素也整个换掉了
我们点击
就只有一个元素飞出来了
在这里插入图片描述
然后 各种操作数据集合的语法 大家都可以这样去玩啦

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

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

相关文章

python的tabulate包在命令行下输出表格不对齐

用tabulate可以在命令行下输出表格。 from tabulate import tabulate# 定义表头 headers [列1, 列2, 列3]# 每行的内容 rows [] rows.append((张三,数学,英语)) rows.append((李四,信息科技,数学))# 使用 tabulate 函数生成表格 output tabulate(rows, headersheaders, tab…

Android 开发简介

前言 Android 是由 Google 领导的开放手机联盟开发的基于 Linux 的开源移动操作系统。有关一般详细信息,请参阅 Android 主网站。 Android 开发与其他平台的开发有很大不同。因此,在开始针对 Android 编程之前,我们建议您确保熟悉以下关键主…

【Docker】安装 Nacos容器并根据Nginx实现负载均衡

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《Docker实战》。🎯🎯 &…

Template -- React

React 版本 Node 21.6.0Npm 10.2.4 项目 创建 npm init vite 项目名称reactjsnpm inpm run dev 依赖 npm i axios # 网络 npm i antd --save # UI npm i ant-design/icons npm i react-router-dom # 路由npm i sass -D # …

什么是技术架构?架构和框架之间的区别是什么?怎样去做好架构设计?(一)

什么是技术架构?架构和框架之间的区别是什么?怎样去做好架构设计?(一)。 在软件行业,对于什么是架构,都有很多的争论,每个人都有自己的理解。在不同的书籍上, 不同的作者, 对于架构的定义也不统一, 角度不同, 定义不同。 一、架构是什么 Linux 有架构,MySQL 有架构,J…

漏洞检测和评估【网站子域扫描工具02】

上一篇:爬取目标网站的域名和子域名【网站子域扫描工具01】 在Python中,有一些流行的漏洞扫描库可以对子域进行漏洞扫描和评估,比如Nmap、Sublist3r等。 1.端口扫描 以下是一个简单的示例代码,展示了如何使用Nmap进行基本的端口扫…

由于找不到d3dcompiler_43.dll缺失,无法打开软件的解决方法分享

d3dcompiler43.dll是什么文件?为什么会出现丢失的情况?又该如何解决呢?本文将详细介绍d3dcompiler43.dll的作用和影响,并提供6个有效的解决方法。 一、d3dcompiler43.dll是什么文件? d3dcompiler43.dll是DirectX SDK…

OSPF协议

OSPF:开放式最短路径优先协议 无类别链路状态型路由协议;组播更新224.0.0.5、224.0.0.6支持等开销负载均衡; 链路状态协议,邻居间共享拓扑,优势在于防环和选路,缺点为更新量和计算量很大; 故OSPF为了能够…

Windows 下使用C#开启蓝牙(未解决的坑)

需求 当程序检测到蓝牙未打开时需要程序自动将W10的蓝牙开启。 资料 Turn on/off Bluetooth radio/adapter from cmd/powershell in Windows 10 - Super User 上的这个连接是通过powershell 开启蓝牙具体代码如下 [CmdletBinding()] Param ([Parameter(Mandatory$true)][V…

python脚本多个文件夹下多个文件中sql语句片段比对

一、需求: 日常测试授权脚本,需要检查多个行业文件夹下单独的授权脚本和汇总授权脚本,一个文件根目录下有多个子文件夹,子文件夹下有多个sql文件,人为比对较为耗时。 需要实现在文件中找到某个sql语句片段,然后遍历比对此sql语句片段在各目录各文件中是否一致。 二、思路…

MySQL入门篇:事物操作(开启事物,提交事物,回滚事物),事物四大特性(ACID),并发事物问题(脏读,不可重复读,幻读),事物隔离级别

目录 1.事物简介2.事物操作1.查看/设置事物提交方式(方式1)2.开启事物(方式2)3.提交事物4.回滚事物 3.事物四大特性(ACID)1.原子性(Atomicity)2.一致性(Consistency)3.隔离性(lsolation)4.持久性…

MyBatisPlus学习笔记四-扩展功能

1、代码生成器 1.1、官方的1 1.3、官方的2-idea插件 1.3、非官方的-idea插件 2、静态工具 先查询,再分组 3、逻辑删除 4、枚举处理器 5、JSON处理器

使用mininet快速入门ONOS路由交换技术与原理

在SDN下路由交换与传统硬件集成方式的路由交换技术有许多相似之处。其中一个比较重要的点是传统交换机中ASIC (Application Specific Integrated Circuit,专用集成电路)决定了其数据平面所支持的功能,而在SDN中,实现了控制面与数据面的分离。…

UI学习-入门

教程:零基础学UI设计,应该先从哪些设计软件入手?【酸梅干超人出品】 一 软件 云端协作工具:即时设计、figma 原型设计:protopie 平面设计: PS 即时设计可设置动态交互、可设置样机。该平台教学方便做的…

selenium上传单个文件及上传多个文件

单个文件 直接传入文件路径 element driver.find_element_by_xpath(//input[type"file"]) element.send_keys(/home/data/download/test.png)多个文件 使用 \n 或者 \t\n 分割文件路径 element driver.find_element_by_xpath(//input[type"file"]) e…

数组练习 Leetcode 566.重塑矩阵

在 MATLAB 中,有一个非常有用的函数 reshape ,它可以将一个 m x n 矩阵重塑为另一个大小不同(r x c)的新矩阵,但保留其原始数据。 给你一个由二维数组 mat 表示的 m x n 矩阵,以及两个正整数 r 和 c &#…

第五天业务题

5-1 你们项目中签到为什么要使用bitmap bitmap是Redis中的String类型里的一种类型,存储数据是以二进制(bit位)为单位进行存储的。在处理大量数据统计和判断时,只占用非常小的一部分内存,且计算速度非常高效。 在项目中…

网络工程师:数据库基础知识面试题(八)

84.数据库技术是什么?主流的数据库管理系统软件有哪些? 数据库技术是指用于存储、管理和操作大量结构化数据的技术。它涉及数据库的设计、建模、查询语言、事务处理、数据安全性、性能优化等方面。 主流的数据库管理系统(DBMS)软件有以下几…

貌似起名可以用这个

貌似起名可以用这个 很多变量或者函数起名字都会移除元音字符,可以考虑使用tr的-d参数,如下: $ echo "Hello World, Welcome to Linux!" | tr -d a,o,e,i Hll Wrld Wlcm t Lnux!不过感觉删除的多了,也不一定是好事。。…

《设计模式的艺术》笔记 - 原型模式

介绍 使用原型实例指定创建对象的种类&#xff0c;并且通过克隆这些原型创建新的对象。原型模式是一种对象创建型模式。 实现 myclass.h // // Created by yuwp on 2024/1/12. //#ifndef DESIGNPATTERNS_MYCLASS_H #define DESIGNPATTERNS_MYCLASS_H#include <iostream&g…