鸿蒙小练习

bean对象

export  class  BannerImage{id:numberurl:stringtargetUrl:stringproductId:numberconstructor(id: number, url: string, targetUrl: string, productId: number) {this.id = idthis.url = urlthis.targetUrl = targetUrlthis.productId = productId}
}export class  dtos{pid:numberconstructor(pid: number) {this.pid = pid}}

首页

import {SysTemContents} from "../commons/Contents"
import { router } from '@kit.ArkUI';
import {BannerImage,dtos} from "../beans/BeannerImages"@Entry
@Component
struct Index {// @State message: string = 'Hello World';@State bannerArr:BannerImage[] =[new BannerImage(1,"app.media.1","pages/SearchPage",1),new BannerImage(2,"app.media.2","pages/SearchPage",2),new BannerImage(3,"app.media.3","pages/SearchPage",3),new BannerImage(4,"app.media.4","pages/SearchPage",4),new BannerImage(5,"app.media.5","pages/SearchPage",5),]@State bannerIndex:number =0build() {
Column() {Column() {//   搜索栏Row() {// Image()}.width(30).backgroundColor("#ffff2626")Row({ space: 5 }) {Text("想要什么就搜一搜")}.width("70%").backgroundColor("#ffff").height(35).onClick(() => {router.pushUrl({url: "pages/SearchPage"})})Row() {Swiper() {ForEach(this.bannerArr, (item: BannerImage) => {Image($r(item.url))})// Image($r("app.media.2")).objectFit(ImageFit.ScaleDown)// Image($r("app.media.3"))// Image($r("app.media.4"))// Image($r("app.media.5"))// Image($r("app.media.1"))}.onChange((index: number) => {// console.log(index.toString())this.bannerIndex = index})// 点击事件.onClick(() => {//  这里写图片的跳转console.log(this.bannerIndex.toString())router.pushUrl({url: this.bannerArr[this.bannerIndex].targetUrl,params: this.bannerArr[this.bannerIndex].productId})}).indicator( // 设置圆点导航点样式new DotIndicator().itemWidth(15).itemHeight(15).selectedItemWidth(15).selectedItemHeight(15).color(Color.Gray).selectedColor(Color.Blue)).autoPlay(true).loop(true).borderRadius(12)}.width("95%").height(150).backgroundColor("#fff").margin({ top: 12 })}.width("100%")Row(){Column(){Image($r("app.media.shangp")).width(30)Text("商品").margin({top:6})}Column(){Image($r("app.media.shangp")).width(30)Text("美容").margin({top:6})}Column(){Image($r("app.media.shangp")).width(30)Text("洗脚").margin({top:6})}Column(){Image($r("app.media.shangp")).width(30)Text("洗脚").margin({top:6})}}.justifyContent(FlexAlign.SpaceAround).height(100).backgroundColor("#fff").width("100%")Row(){Text("猜你喜欢谁")}Divider().strokeWidth(1).color('#ff600505')}.height(220).backgroundColor("#ff9d274c")}
}

跳转页面

import { router } from '@kit.ArkUI';@Entry
@Component
struct SearchPage {@State message: string = 'Hello World';build() {RelativeContainer() {Text(this.message).id('SearchPageHelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})}.height('100%').width('100%')}onPageShow(): void {let n1 = router.getParams()console.log("这是我接受的参数")// console.log(n1.toString())console.debug(n1.toString())}
}

效果图

跳转后页面

明明拿到了参数,但是为什么会报错?可能是类型对不上,因为我传的参数是int

练习的知识点:

1.轮播图

bean对象

轮播图我遍历了下一个对象的数组,类似于java数组

2.页面跳转

带有参数跳转页面,模仿广告跳转

3.快捷菜单栏

一个样式布局

只能有一个根标签,所以我们要用个column,把轮播和页面跳转,包起来。

4.分割器

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

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

相关文章

YOLO之boxes小记

import cv2 from ultralytics import YOLO # 加载模型 model YOLO(modelyolov8n.pt) results model(sourceanimal.jpg)result results[0] img result.plot() from matplotlib import pyplot as plt # matplotlib :rgb模式 # cv:bgr模式 plt.imshow(Ximg[:,:,::-1])result.b…

鸿蒙开发:Universal Keystore Kit(密钥管理服务)【加密导入密钥(C/C++)】

加密导入密钥(C/C) 以加密导入ECDH密钥对为例,涉及业务侧加密密钥的[密钥生成]、[协商]等操作不在本示例中体现。 具体的场景介绍及支持的算法规格。 在CMake脚本中链接相关动态库 target_link_libraries(entry PUBLIC libhuks_ndk.z.so)开发步骤 设备A&#xf…

模电基础 - 集成运算放大电路

目录 一. 简介 二. 直接耦合放大电路 三. 阻容耦合放大电路 四. 变压器耦合放大电路 五. 光电耦合 六. 集成运放电路 1. 双集成运放电路 2.单集成运放电路 3.单集和双集混合 一. 简介 集成运算放大电路简称集成运放,是一种具有高增益、高输入电阻和低输出电…

SpringBoot 定时任务之@Scheduled cron表达式

在Spring Boot中,Scheduled注解配合Cron表达式可以用来定义定时任务。 Cron表达式是一种灵活的时间表达方式,通常用于配置任务的执行周期。 以下是一些关键点和示例: 1. 开启定时任务支持 要在Spring Boot应用中使用定时任务,首…

【NLP学习路线的总结】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步! 目录 0. 👉前言1. 👉前置知识👉基础数学知识👉编程语言👉…

代码随想录算法训练营第58天 [101.孤岛的总面积 102.沉没孤岛 103.水流问题 104.建造最大岛屿]

代码随想录算法训练营第58天 [101.孤岛的总面积 102.沉没孤岛 103.水流问题 104.建造最大岛屿] 一、101.孤岛的总面积 链接: 代码随想录. 思路:从四个边缘开始深搜,搜到了标记为2,这样所有为2和0的就不是孤岛,所有为1的就是孤岛 做…

记录一次ffmpeg手动编译出现的问题

前言部分 使用环境: ubuntu 22.04 最近手动编译了一次的ffmpeg(参考博客ffmpeg学习:ubuntu下编译ffmpeg(全网最懒的编译脚本)),但是过程出现了一些问题,因此在此记录一下,若有疑问,欢迎讨论~。 …

MHA Master High Availability

一、MHA工作原理和架构 MHA利用 SELECT 1 As Value 指令判断master服务器的健康性,一旦master 宕机,MHA 从宕机崩溃的master保存二进制日志事件(binlog events)识别含有最新更新的slave应用差异的中继日志(relay log)到其他的sla…

centos 7.9安装subversion

一、安装subversion yum install -y subversion

20240709 每日AI必读资讯

🧠手把手教你如何打造《星际穿越》中的 TARS 机器人复制品! - 一位名为 Charles Diaz 的开发者使用树莓派创建了一个完全功能的 TARS 复制品。 - 使用树莓派3B作为主控,配合Adafruit PCA-9685伺服驱动器,通过编写的步态控制程序…

C++ lambda按引用捕获导致的空悬指针问题

lambda可以按值捕获,也可以按引用捕获。按引用捕获会导致闭包包含指涉到局部变量的引用,或者指涉到定义lambda式的作用域内形参的引用。一旦lambda式所创建的闭包越过了该局部变量或者形参的生命周期,那么闭包内的引用就会空悬。比如下面这段…

给您介绍工控CAN总线

CAN是什么 CAN,全称Controller Area Network,即控制器局域网,是一种由Bosch公司在1983年开发的通信协议。它主要用于汽车和工业环境中的电子设备之间的通信。CAN协议定义了物理层和数据链路层的通信机制,使得不同的设备能够通过CA…

家里猫咪浮毛太多怎么办?值得买的猫毛空气净化器推荐

作为一位拥有5年铲屎经验的铲屎官,我知道许多新手铲屎官可能听说过宠物空气净化器,但了解得不多。事实上,宠物空气净化器确实是养猫家庭必备的小家电之一。它的大面积进风口可以有效吸附空气中的微小浮毛和皮屑,专门的除臭技术能有…

Typescript【网址取ID传入后端API】

网址取ID传入后端API 实现部分typescript&#xff08;前端&#xff09; 实现部分 <a href{zyjs?id5} key{5} className“o_on”>动漫建模 typescript&#xff08;前端&#xff09; 第一部分&#xff1a;获取查询字符串 如果URL是https://**/zyjs?id5&#xff0c;那么…

写一个函数,返回参数二进制中 1 的个数

代码要求 输入一个整数n&#xff0c;输出该数32位二进制中为1的个数&#xff08;包括最高位的符号位&#xff09;&#xff0c;其中负数用补码表示 如&#xff1a;输入&#xff1a;15 &#xff08;15的二进制表示&#xff1a;0000 1111&#xff09; 输出&#xff1a;4 代码实…

【server】1、后台基础搭建

1、父工程创建 1.1新建 1.2 父工程pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"h…

Kafka 面试题精选

1. Kafka 基础知识与概念 Apache Kafka: 开源分布式事件流平台&#xff0c;用于实时数据处理与传输。主要用途: 大数据实时处理、日志聚合与传输、消息队列与微服务集成、网站活动追踪与用户行为分析、数据集成。 2. Kafka 架构与设计 Producer: 发布消息到 Kafka 集群的应用…

记一次因ThreadPoolExecutor多线程导致服务器内存压满问题

经过下载服务器内存数据得知是通过多线程业务处理查询list集合数据没有得到正确释放导致的。 首先先了解一下list集合数据的存放和回收&#xff08;可能说的不对&#xff0c;请谅解【挠头】&#xff09; 存放&#xff1a; 当我们创建一个list或者从数据库查询出的数据用list集…

电脑选购全解析!你需要知道的一切!

在选择电脑类型时&#xff0c;你可以考虑以下因素&#xff1a; 你的主要用途是什么&#xff1f; 你是否需要携带电脑&#xff1f; 你的预算是多少&#xff1f; 你对性能和图形要求有多高&#xff1f; 你是否需要特定的软硬件功能&#xff1f;根据这些因素&#xff0c;你可以…

【计算机网络】阻塞队列以及生产者消费者模型

目录 阻塞队列一. 概念二. 标准库中的阻塞队列三. 生产者消费者模型四. 阻塞队列实现 总结 阻塞队列 一. 概念 阻塞队列是⼀种特殊的队列.也遵守"先进先出"的原则. 阻塞队列能是⼀种线程安全的数据结构,并且具有以下特性: 当队列满的时候,继续⼊队列就会阻塞,直到…