鸿蒙:30秒学会如何用控制器控制轮播图

103 阅读1分钟

鸿蒙:30秒学会如何用控制器控制轮播图

img

第一步

img

实例化控制器

第二步

设置控制器

img

第三步

调用控制器方法

img

补充

SwiperController对象核心方法

showNext(): void翻至下一页。翻页带动效切换过程,时长通过duration指定。showPrevious(): void翻至上一页。翻页带动效切换过程,时长通过duration指定。更多方法参考文档。。。。。

示例:

@Entry
@Component
struct abc {
  // 创建控制器对象
  controller: SwiperController = new SwiperController()

  build() {
    Column() {
      // 将控制器设置给Swiper
      Swiper(this.controller) {
        Image($r("app.media.song01"))
        Image($r("app.media.song02"))
        Image($r("app.media.song03"))
      }
      .width("100%")
      // 设置导航点样式
      .indicator(
        Indicator.dot()
          .selectedColor(Color.White)
          .selectedItemWidth(20)
          .itemWidth(20)
          .color(Color.White)
      )

      Button("下一页")
        .onClick(() => {
          // 调用控制器方法
          this.controller.showNext()
        })
    }
    .width("100%")
    .height("100%")
  }
}