鸿蒙:30秒学会如何用控制器控制轮播图
第一步
实例化控制器
第二步
设置控制器
第三步
调用控制器方法
补充
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%")
}
}