鸿蒙小练习

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.分割器