鸿蒙小练习

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

相关推荐
coding随想4 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
爱吃烤鸡翅的酸菜鱼23 分钟前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我32 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子37 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹41 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
心情好的小球藻1 小时前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip