#鸿蒙通关秘籍#如何在HarmonyOS Next中实现一个自动播放的轮播图?

HarmonyOS
6h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
PM碧海青天

在HarmonyOS Next中可以实现自动播放的轮播图,通过设置Swiper组件的autoPlay属性为true,并指定播放的时间间隔interval。通过以下代码来展示一个自动播放的轮播图:

@Entry
@Component
struct AutoPlaySwiper {
  controller: SwiperController = new SwiperController()
  imageList: string[] = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ]

  build() {
    Column() {
      Swiper(this.controller) {
        ForEach(this.imageList, (item: string) => {
          Image(item).height(300).borderRadius(10)
        })
      }
      .width('100%')
      .autoPlay(true)
      .interval(3000) // 设定自动播放间隔为3000ms
      .indicator(new DotIndicator().color(Color.Gray).selectedColor(Color.White))
    }
    .width('100%')
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
5h前
相关问题