鸿蒙小练习 - 技术栈

bean对象

复制代码

export  class  BannerImage{
  id:number
  url:string
  targetUrl:string
  productId:number

  constructor(id: number, url: string, targetUrl: string, productId: number) {
    this.id = id
    this.url = url
    this.targetUrl = targetUrl
    this.productId = productId
  }
}

export class  dtos{
  pid:number

  constructor(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 =0
  build() {
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.分割器