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

}
相关推荐
繁依Fanyi1 小时前
【参赛心得】我的 HarmonyOS 开发入门与参赛之路
ide·人工智能·华为·word·harmonyos·aiide·codebuddyide
小白学鸿蒙2 小时前
鸿蒙数据库表中的数据如何导出为Excel存到系统下载目录
数据库·excel·harmonyos
爱笑的眼睛113 小时前
HarmonyOS WindowExtension深度解析:构建跨窗口交互的创新体验
华为·harmonyos
爱笑的眼睛114 小时前
HarmonyOS环境光传感器自适应:实现智能UI调光的深度实践
华为·harmonyos
爱笑的眼睛114 小时前
HarmonyOS分布式文件系统深度解析:构建跨设备无缝文件访问应用
华为·harmonyos
猫林老师5 小时前
HarmonyOS应用性能调优与内存管理实战
华为·harmonyos
superior tigre7 小时前
(huawei)43. 字符串相乘
华为
星释8 小时前
鸿蒙Flutter三方库适配指南: 05.使用Windows搭建开发环境
windows·flutter·harmonyos
广然9 小时前
跨厂商(华为 & H3C)防火墙 IPSec 隧道部署
服务器·网络·华为
wwlsm_zql10 小时前
华为科大讯飞携手,低成本AI革新教育农业应用
人工智能·华为