鸿蒙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;
  }

}
相关推荐
Kisang.21 小时前
【HarmonyOS】消息通知
华为·harmonyos
安卓开发者1 天前
鸿蒙NEXT网络通信实战:使用HTTP协议进行网络请求
网络·http·harmonyos
爱笑的眼睛111 天前
HarmonyOS ArkTS深度解析:构建高性能声明式UI应用
华为·harmonyos
TiZizzz1 天前
HarmonyOS应用开发 - strip编译配置优先级
华为·harmonyos
徐归阳1 天前
DevEco Studio安装
编辑器·harmonyos
小白学鸿蒙2 天前
OpenHarmony(开源鸿蒙)小白入门教程
harmonyos·鸿蒙·鸿蒙系统
安卓开发者2 天前
鸿蒙NEXT网络通信进阶:全方位优化HTTP传输性能
http·华为·harmonyos
爱笑的眼睛112 天前
HarmonyOS 应用开发深度解析:ArkTS 状态管理与渲染控制的艺术
华为·harmonyos
爱笑的眼睛112 天前
深入理解HarmonyOS ArkTS语法:从基础到高级应用开发
华为·harmonyos
yenggd3 天前
sr mpls te隧道配置案例
网络·华为