实战08-NavList

最新推荐文章于 2024-10-09 23:59:10 发布

追风小老头折腾程序

最新推荐文章于 2024-10-09 23:59:10 发布

阅读量548

点赞数 14

分类专栏： HarmonyOS-租房实战项目文章标签： harmonyos

本文链接：https://blog.csdn.net/weixin_43980468/article/details/142179048

版权

HarmonyOS-租房实战项目专栏收录该内容

25 篇文章 0 订阅

订阅专栏

import { INavItem, INavList } from '../../api/models/HomeData';

@Component
export default struct NavList {
  @Prop navList: INavList

  build() {
    Grid() {
      ForEach(this.navList, (nav: INavItem) => {
        GridItem() {
          Column({ space: 8 }) {
            Image(nav.imageURL)
              .width(58)
              .height(56)
            Text(nav.title).fontSize(12).fontColor($r('app.color.black'))
          }
        }
      }, (nav: INavItem) => nav.id + '')
    }
    .width('100%')
    .height(170)
    .rowsTemplate('1fr 1fr') //两行
    .columnsTemplate('1fr 1fr 1fr 1fr') //4列
    .rowsGap(14) //行间距
    .columnsGap(32) //列间距
    .margin({ top: 24 })
  }
}

import { getHomeDataApi } from '../api/home';
import { BannerListDataSource, INavList } from '../api/models/HomeData';
import SwiperLayout from '../views/Home/SwiperLayout';
import { window } from '@kit.ArkUI';
import SearchBar from '../views/Home/SearchBar';
import NavList from '../views/Home/NavList';
import { PADDING } from '../constants/size';


@Entry
@Component
export default struct Home {
  @State bannerList: BannerListDataSource = new BannerListDataSource()
  @State navList: INavList = []
  //获取首页数据的函数
  getHomeData = async () => {
    const result = await getHomeDataApi()
    this.bannerList.setList(result.bannerList)
    this.navList = result.navList;


  }

  //生命周期函数：初始化渲染时候
  aboutToAppear(): void {
    this.getHomeData()

    window.getLastWindow(getContext())
      .then(win => {
        win.setWindowLayoutFullScreen(true)
      })
  }

  build() {

    Scroll() {
      Stack() {
        Column() {
          //轮播图组件
          SwiperLayout({ bannerList: this.bannerList })
          Column() {
            //导航栏
            NavList({ navList: this.navList })
          }.width('100%').padding({ left: PADDING, right: PADDING })
        }.width('100%')

        //搜索区
        SearchBar()
      }.width('100%').alignContent(Alignment.TopStart)
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
    .align(Alignment.TopStart)
    .backgroundColor('#ff73b562')

  }
}