实战09-PlanLIst

import { IPlanItem, IPlanList } from '../../api/models/HomeData';

@Component
export default struct PlanList {
  @Prop planList: IPlanList

  build() {
    Row({ space: 5 }) {
      ForEach(this.planList, (plan: IPlanItem) => {
        Image(plan.imageURL).width(78).height(60).objectFit(ImageFit.Fill)
      }, (plan: IPlanItem) => plan.id + '')
    }
    .width('100%')
    .margin({ top: 18 })
  }
}

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

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

  }

  //生命周期函数：初始化渲染时候
  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 })
            // TitleList
            TitleList({ titleList: this.titleList })
            //计划列表
            PlanList({ planList: this.planList })
          }.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('#ffffffff')

  }
}