HarmonyOS应用开发快速入门(2)：组件/Swiper和Indicator

src/main/ets/pages/Index.ets

1. class BannerClass {  // 横幅类
2.   id: string = '';  // 字符串/编号
3.   imageSrc: ResourceStr = '';  // 资源字符串/图片来源
4.   url: string = '';  // 字符串/URL
6.   constructor(id: string, imageSrc: ResourceStr, url: string) {
7.     this.id = id;
8.     this.imageSrc = imageSrc;
9.     this.url = url;
10.   }
11. }
13. @Entry
14. @Component
15. struct Index {  // 结构/索引
16.   @State message: string = '快速入门';  // 变量/消息
18.   build() {
19.     Column() {  // 列方向铺展的对象
20.       Text(this.message)
21.         .fontSize(24)  // 字体大小
22.         .fontWeight(700)  // 笔画粗细
23.         .width('100%')  // 对象的容器的相对宽度
24.         .textAlign(TextAlign.Start)  // 对齐方式
25.         .padding({ left: 16 })  // 对象的内部的左侧的填充
26.         .fontFamily('HarmonyHeiTi-Bold')  // 字体
27.         .lineHeight(30)  // 自上向下的行高
28.       Banner()  // 横幅的对象
29.     }
30.     .height('100%')  // 对象的容器的相对高度
31.     .width('100%')
32.     .backgroundColor('#F1F3F5') // 背景色
33.   }
34. }
36. @Preview
37. @Component
38. struct Banner {
39.   @State bannerList: Array<BannerClass> = [  // 数组/横幅类
40.     new BannerClass('pic0', $r('app.media.banner_pic0'),  // 类的实例化
41.       'https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527'),
42.     new BannerClass('pic1', $r('app.media.banner_pic1'),
43.       'https://developer.huawei.com/consumer/cn/'),
44.     new BannerClass('pic2', $r('app.media.banner_pic2'),
45.       'https://developer.huawei.com/consumer/cn/deveco-studio/'),
46.     new BannerClass('pic3', $r('app.media.banner_pic3'),
47.       'https://developer.huawei.com/consumer/cn/arkts/'),
48.     new BannerClass('pic4', $r('app.media.banner_pic4'),
49.       'https://developer.huawei.com/consumer/cn/arkui/'),
50.     new BannerClass('pic5', $r('app.media.banner_pic5'),
51.       'https://developer.huawei.com/consumer/cn/sdk')
52.   ];
54.   build() {
55.     Swiper() {  // 滑动和轮播的对象
56.       ForEach(this.bannerList, (item: BannerClass, index: number) => {
57.         Image(item.imageSrc)
58.           .objectFit(ImageFit.Contain)  // 图片的适配的方式
59.           .width('100%')  /* (列对象没有高度) */
60.           .padding({ top: 11, left: 16, right: 16 })
61.           .borderRadius(16)
62.       }, (item: BannerClass, index: number) => item.id)
63.     }
64.     .autoPlay(true)  // 自动轮播
65.     .loop(true)  // 循环播放
66.     .indicator(  // 指示器
67.       new DotIndicator()  // 点状指示器
68.         .color('#1a000000')  // 颜色
69.         .selectedColor('#0A59F7')  // 选中的颜色
70.     )
71.   }
72. }

复制代码

src/main/resources/base/media/banner_pic0.png
src/main/resources/base/media/banner_pic1.png
src/main/resources/base/media/banner_pic2.png
src/main/resources/base/media/banner_pic3.png
src/main/resources/base/media/banner_pic4.png
src/main/resources/base/media/banner_pic5.png

使用Swiper构建运营推荐位-HarmonyOS应用开发快速入门-Codelabs-华为开发者联盟

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。