鸿蒙OS开发中，我想设置一个单张轮播图中嵌入card，有没有简单好用的示例代码？

Question

鸿蒙OS开发中，我想设置一个单张轮播图中嵌入card，有没有简单好用的示例代码？

Answer 1

参考代码：

@Entry
@Component
struct MyComponent {
  @State imageUrls: string[] = ['image1Url', 'image2Url', 'image3Url']
  @State currentIndex: number = 0

  build() {
    Column() {
      Image(this.imageUrls[this.currentIndex])
       .width('100%')
       .height(300)
      Card() {
        Text('这是 Card 中的内容')
      }
      Button('Previous')
      .onClick(() => {
          this.currentIndex = (this.currentIndex - 1 + this.imageUrls.length) % this.imageUrls.length;
        })
      Button('Next')
      .onClick(() => {
          this.currentIndex = (this.currentIndex + 1) % this.imageUrls.length;
        })
    }
  }
}