feat: 使用Swiper构建运营推荐位

entry/src/main/ets/pages/Index.ets

@@ -1,3 +1,15 @@
+class BannerClass {
+  id: string = '';
+  imageSrc: ResourceStr = '';
+  url: string = ''; // 存储点击跳转的地址
+
+  constructor(id: string, imageSrc: ResourceStr, url: string) {
+    this.id = id;
+    this.imageSrc = imageSrc;
+    this.url = url;
+  }
+}
+
 @Entry
 @Component
 struct Index {
@@ -24,11 +36,32 @@ struct Index {
 @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() {
-    Image($r('app.media.banner_pic1'))
-      .objectFit(ImageFit.Contain)
-      .width('100%')
-      .padding({ top: 11, left: 16, right: 16})
-      .borderRadius(16)
+    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)
+    .interval(5000)
+    .loop(true)
+    .indicator(
+      new DotIndicator()
+        .color('#1A0000')
+        .selectedColor('#0A59F7'))
   }
 }