使用Swiper构建运营推荐位

完成了上一节内容的学习后，在您的应用界面上已经显示了一个基础的文本与图片，在本节内容中我们希望实现快速入门案例中的运营推荐位效果。

一、介绍

根据本教程进行学习，您可以选择从上一教程结束时构建完成的项目开始，也可以直接运行02_StartingPoint文件夹中的项目。

02_StartingPoint文件夹：截止到本节内容之前不包括本节内容的所有代码

根据教程中的提示使用02_Resources文件夹中的文件。

02_Resources文件夹：本节内容中需要用到的图片、文本等资源文件

如果您想要自行探索，可以直接打开02_Complete文件夹中的项目并浏览代码。

02_Complete文件夹：根据本节内容逐步操作后，得到的包括之前章节内容及本节内容的代码包

项目文件下载
下载项目文件开始构建本项目，请根据以下步骤操作：

项目文件下载 02_UseSwiperToBuildBanner.zip

二、Banner数据结构设计

要实现Banner位，先让我们看看Banner位的数据结构设计。

1. 根据设计图可以看到快速入门Banner运营位由多张图片资源构成，于是我们可以在Index.ets文件中创建一个BannerClass类，用于表示每张图片资源的数据结构。

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

class BannerClass {
   

}

@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 {
   
  build() {
   
    Image($r('app.media.banner_pic1'))
      .objectFit(ImageFit.Contain)
      .width('100%')
      .padding({
    top: 11, left: 16, right: 16 })
      .borderRadius(16)
  }
}

2. 我们为BannerClass添加id属性，用于唯一标识每一张图片资源，在之后的ForEach内容中我们会看到其作用。

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

class BannerClass {
   
  id: string = '';
}

// ...

3. 为BannerClass添加imageSrc属性，用于存储图片地址，此处定义为ResourceStr类型，其为Resource类型与string类型的联合类型。Resource类型在加载本地图片资源时会用到的，而string类型在加载网络图片资源时会用到。

  imageSrc: ResourceStr = '';

4. 为BannerClass添加url属性，用于存储Banner图片点击后跳转到的在线网页地址，在之后的跳转功能中会用到。

  url: string = '';

5. 为BannerClass添加构造函数，使用传入的id、imageSrc与url作为实例化对象的对应属性值。

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