HarmonyOS interface router scale pageTransition SlideEffect.Left ArkTS ArkUI

在这里插入图片描述

🎬️create

@Component
export  default struct TitleBar {build(){Row(){Text('transition').fontSize('30fp').fontColor(Color.White)}.width('100%').height('8%').backgroundColor('#4169E1').padding({left:10})}}

🎞️interface

export  interface IList{title:string;url :string;
}
  @State listData:IList[]=[ //  @State listData:Array<IList>=[{title:'in',url:'pages/home1'},{title:'scale',url:'pages/home2'},{title:'small',url:'pages/home3'},{title:'in',url:''}]

💡foreach

   ForEach(this.listData,( item: IList,index?:number)=>{//listitemButton({type:ButtonType.Capsule}){Text(item.title).fontSize('35fp').fontColor(Color.White)}//...})

🔦router

import router from '@ohos.router'

📼mainpage

  "pages/home1"

📹️onclick

 .onClick(()=>{//routerrouter.pushUrl({url:item.url})})

📺️setInterval

//home1  page1
import  router from '@ohos.router'
@Entry
@Component
struct Index {@State TOTAL_TIME:number = 6;//s@State FIRST_CT:number =3;//saboutToAppear(){//timerlet timer=   setInterval(()=>{this.TOTAL_TIME--;if(this.TOTAL_TIME===0){//endrouter.pushUrl({url:"pages/Index"})clearInterval(timer);}},1000)}build() {Column() {Row() {if(this.TOTAL_TIME>this.FIRST_CT){//1Image($r('app.media.t2')).objectFit(ImageFit.Contain)}else if(this.TOTAL_TIME<this.FIRST_CT) {//2Image($r('app.media.bc')).objectFit(ImageFit.Contain).width('30%')Text(' - m - ').fontSize('30fp')}}.width('100%').height('100%').justifyContent(FlexAlign.Center)// Text('in')//   .fontSize('50fp')}.width('100%')}
}

-----------

📽️TransitionEnter scale

//home2 page2@State scale1: number = 1@State opacity1: number = 1
//...Column()
.scale({ x: this.scale1 }).opacity(this.opacity1)
//...pageTransition() {PageTransitionEnter({ duration: 1200, curve: Curve.Linear }).onEnter((type: RouteType, progress: number) => {this.scale1 = 1this.opacity1 = progress}) // onEnter (0% -- 100%)PageTransitionExit({ duration: 1500, curve: Curve.Ease }).onExit((type: RouteType, progress: number) => {this.scale1 = 1 - progressthis.opacity1 = 1}) // onExit (0% -- 100%)}

在这里插入图片描述

🎥SlideEffect.Left

  pageTransition() {PageTransitionEnter({ duration: 1200 }).slide(SlideEffect.Left)PageTransitionExit({ delay: 100 }).translate({ x: 100.0, y: 100.0 }).opacity(0)}

在这里插入图片描述

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

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

相关文章

GitLab的原理及应用详解(八)

本系列文章简介&#xff1a; 随着软件开发的不断进步和发展&#xff0c;版本控制系统成为了现代软件开发过程中不可或缺的一部分。而GitLab作为其中一种流行的版本控制工具&#xff0c;在软件开发领域享有广泛的应用。GitLab不仅提供了强大的版本控制功能&#xff0c;还集成了项…

echarts点击柱状图携带参数跳转页面

getBarCharts() {let that = thislet barWidth = 20let manColors = []let womanColors = []let nowTime = let lastTime = let option = {//提示框tooltip: {trigger: axis,formatter: function(p) {let div = `${p[0].name}<br/>${p[0].seriesName}:${p[0].value}<b…

EXPLAIN执行计划详解

EXPLAIN 是 MySQL 中的一个非常实用的命令&#xff0c;主要用于分析 SQL 查询语句的执行计划&#xff08;Query Execution Plan&#xff0c;QEP&#xff09;。通过这个命令&#xff0c;用户可以获取到数据库引擎如何执行特定的 SQL 语句的详细信息&#xff0c;这对于优化查询性…

【星海随笔】微信小程序(三)

网络数据请求 1.小程序中网络数据请求的限制 出于安全性方面的考虑,小程序官方对 数据接口的请求 做出了如下 两个限制: ① 只能请求 HTTPS 类型的接口 ② 必须将 接口的域名 添加到 信任列表 中 微信小程序只能请求 https 类型的接口 且需要请求的域名必须提前进行设置后,才可…

DLRover:蚂蚁集团开源的AI训练革命

在当前的深度学习领域&#xff0c;大规模训练作业面临着一系列挑战。首先&#xff0c;硬件故障或软件错误导致的停机时间会严重影响训练效率和进度。其次&#xff0c;传统的检查点机制在大规模训练中效率低下&#xff0c;耗时长且容易降低训练的有效时间。资源管理的复杂性也给…

Codigger编码场景介绍(二):驾驶舱场景(Cockpit)

Codigger&#xff0c;一个专为开发人员设计的工具&#xff0c;致力于为不同的开发场景提供最佳的切换体验。Codigger囊括了多种场景&#xff0c;如传统场景、调试场景、设计器场景、驾驶舱场景以及纯净场景等。在上一篇文章中&#xff0c;我们介绍了传统场景模式&#xff0c;今…

数据结构_栈在括号匹配中的应用_代码

学习笔记 #include<stdio.h> #include<stdlib.h> #include<string.h>#define MaxSize 10 typedef struct{char data[MaxSize];int top; }SqStack;//初始化栈 void InitStack(SqStack &S){S.top 0; } //判断栈是否为空 bool StackEmpty(SqStack S){if (…

深度学习之基于YoloV5钢材微小缺陷检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与目标 在钢材生产过程中&#xff0c;由于各种因素&#xff0c;钢材表面可能会出现微小缺陷&#xff…

DevOps实践:通过云效实现hexo自动构建部署发布

DevOps&#xff08;Development和Operations的组合词&#xff09;是一组过程、方法与系统的统称&#xff0c;用于促进开发&#xff08;应用程序/软件工程&#xff09;、技术运营和质量保障&#xff08;QA&#xff09;部门之间的沟通、协作与整合。这是一种重视“软件开发人员&a…

如何科学制定个性化健康方案?

随着现代生活节奏的加快&#xff0c;慢性病已经成为困扰许多人的健康难题。在这个信息爆炸的时代&#xff0c;如何科学、有效地管理个人健康&#xff0c;成为了我们每个人必须面对的问题。今天&#xff0c;我们就来探讨一下如何通过一体化解决方案&#xff0c;科学制定个性化健…

接口自动化测试工具-----pytest

首先确保安装了Python环境&#xff0c;首先&#xff0c;你需要确保已安装 Python 和 Pip。如果还没有安装&#xff0c;可以从 Python 官方网站下载并安装最新版本的 Python。安装过程中请确保选中“Add Python to PATH”选项。 安装pytest:打开命令提示符&#xff08;Command …

初见flyway

flyway (一种数据库版本控制工具 document) 两种文件 V 和 R V: V 开头是不可重复执行的文件&#xff0c;每次修改完都该更改名称 R: R 开头是可重复执行的文件&#xff0c;需要保证内部sql都是可以重复执行的 名称格式&#xff1a; V__table_name.sql, R__table_name.sql …

水面漂浮物生活垃圾识别检测系统

水面漂浮物生活垃圾识别检测系统通过现场监控摄像机对河道湖面等水体进行实时监测&#xff0c;水面漂浮物生活垃圾识别检测系统借助智能视频分析技术和YOLO深度学习技术&#xff0c;系统能够自动识别和抓拍水面上的垃圾漂浮物。一旦系统检测到有垃圾漂浮在水面上&#xff0c;立…

深度学习之基于暗通道算法+卷积神经网络图像去雾可视化系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 在图像处理领域&#xff0c;图像去雾技术一直是一个重要的研究方向。由于雾霾等天气条件的影响…

软件测试/测试开发丨学习笔记之Allure2测试报告

Allure2测试报告 1、使用 Allure2 运行方式-Python 1&#xff09;–alluredir 参数生成测试报告。 在测试执行期间收集结果 pytest [测试用例/模块/包] --alluredir./result/ (—alluredir这个选项 用于指定存储测试结果的路径)#生成在线的测试报告 allure serve ./result2…

解决Ubuntu无法使用root登录的问题

1、登录普通用户 2、使用vi编辑器打开/etc/pam.d/gdm-autologin并注释掉auth required pam_succeed_if.so user ! root quiet_success 3、使用vi编辑器打开/etc/pam.d/gdm-password并注释掉auth required pam_succeed_if.so user ! root quiet_success 4、注销用户重新用roo…

Windows部署Jar包到系统服务(Service)

使用WinSW工具 1、工具下载地址&#xff1a;https://github.com/winsw/winsw/releases 选择最新版本下载 根据机器32位或者64位分别下载exe&#xff0c;再下载sample-minimal.xml文件 2、修改文件名 将两个文件名称修改为服务名&#xff0c;如&#xff1a; test.exe 和 test…

【誉天618·年中钜惠】无忧卡计算VIP会员上线

在数字化浪潮汹涌的当下&#xff0c;技术更新迭代的速度令人目不暇接。为了满足广大技术爱好者与专业人士对于最新技术的渴望与追求。2022年我们推出了誉天系列会员卡&#xff0c;受到了学员和企业的一致好评&#xff0c;现在我们又结合当下的热门ICT技术进行了会员卡升级。 誉…

Manjaro Linux上安装和配置输入法Fcitx5(稳定2014-5-17亲测)

在Manjaro Linux上安装和配置输入法&#xff0c;通常会选择Fcitx5或Ibus作为输入法框架。以下是详细步骤&#xff0c;包括安装和配置输入法框架以及安装中文输入法。 安装过程中冲突 卸载老版本 fcitx-4.*即可&#xff0c; 应为全面拥抱Fcitx5 参考文献&#xff1a; Fcitx5 do…

WinInet 编程:MFC 中的互联网编程

目录 概述 MFC WinInet 所包含的类 使用 WinInet 编程的一般步骤 创建 CInternetSession 类对象 头文件包含 对象创建 初始化 WinInet 查询设置 Internet 请求对象 设置代理服务器 设置超时时间 创建 CInternetConnection 类对象 对象创建 连接到服务器 创建 CInt…