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()}