鸿蒙banner页实现

java 复制代码
@Entry
@Component
struct Index {
  @State message: string = '快速入门';

  build() {
    Column() {
      Text(this.message)
        .fontSize(24)
        .fontWeight(700)
        .width('100%')
        .textAlign(TextAlign.Start)
        .padding({left:16})
        .fontFamily('HarmonyHeiTi-Bold')
        .lineHeight(33)
      Banner()
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}


@Preview
@Component
struct Banner {

  @State bannerList:Array<BannerClass> = [
    new BannerClass('pic0',$r('app.media.banner_pic0'),'https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527'),
    new BannerClass('pic1',$r('app.media.banner_pic1'),'https://developer.huawei.com/consumer/cn/'),
    new BannerClass('pic2',$r('app.media.banner_pic2'),'https://developer.huawei.com/consumer/cn/deveco-studio/'),
    new BannerClass('pic3',$r('app.media.banner_pic3'),'https://developer.huawei.com/consumer/cn/arkts/'),
    new BannerClass('pic4',$r('app.media.banner_pic4'),'https://developer.huawei.com/consumer/cn/arkui/'),
    new BannerClass('pic5',$r('app.media.banner_pic5'),'https://developer.huawei.com/consumer/cn/sdk')
  ]

  build() {
    Swiper() {
      ForEach(this.bannerList,(item:BannerClass,index:number) => {
        Image(item.imageSrc)
          .objectFit(ImageFit.Contain)
          .width('100%')
          .padding({ top:11, left:16, right:16})
          .borderRadius(16)
      },(item:BannerClass,index:number) => item.id)

    }.autoPlay(true)
    .loop(true)
    .indicator(new DotIndicator().color('#1a000000').selectedColor('#0A59F7'))
  }
}

class BannerClass {
  id:string = '';
  imageSrc:ResourceStr = '';
  url:string = '';

  constructor(id:string,imageSrc:ResourceStr,url:string) {
    this.id = id;
    this.imageSrc = imageSrc;
    this.url = url;
  }

}