#鸿蒙通关秘籍#何在HarmonyOS Next中监听轮播图的切换事件?

HarmonyOS
2024-11-29 15:19:13
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
墨s年华BIOS

可以利用Swiper组件的onChange事件监听每次轮播图切换时触发该事件,返回当前显示的子组件索引,从而实现对轮播图切换事件的响应:

@Entry
@Component
struct ChangeEventSwiper {
  controller: SwiperController = new SwiperController()
  @State currentIndex: number = 0
  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, index: number) => {
          Image(item).height(300).borderRadius(10)
        }, (index: number) => index.toString())
      }
      .width('100%')
      .onChange((index: number) => {
        this.currentIndex = index
        console.log(`Current index: ${this.currentIndex}`)
      })
      .indicator(new DotIndicator().color(Color.Gray).selectedColor(Color.White))
    }
    .width('100%')
    .height('100%')
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
分享
微博
QQ
微信
回复
2024-11-29 16:56:20
相关问题
提问
该提问已有0人参与 ,帮助了0人