实战05-Banner(Swiper)

import { IBannerItem, IBannerList } from '../../api/models/HomeData';

@Component
export default struct SwiperLayout {
  @Prop bannerList: IBannerList;

  build() {
    Swiper() {
      ForEach(this.bannerList, (banner: IBannerItem) => {
        Image(banner.imageURL)
          .width('100%')
          .height('100%')
          .objectFit(ImageFit.Fill)
      }, (banner: IBannerItem) => banner.id + '')
    }
    .width('100%')
    .height(211 - 36) //暂时减去
    .autoPlay(true) //自动轮播
    .indicator(
      Indicator.dot()
        .color($r('app.color.indicator_color'))
        .selectedColor($r('app.color.indicator_active_color'))
    )
  }
}

//目标类  使用轮播图组件  
SwiperLayout({ bannerList: this.bannerList })

 

// 目标类 获取首页数据的函数

getHomeData = async () => { // 调用 API 获取数据

  const result = await getHomeDataApi(); // 将 API 返回的 bannerList 更新到组件的属性中      this.bannerList = result.bannerList;

} 

aboutToAppear(): void {  this.getHomeData()}