【高心星出品】
轮播图（Swiper）
轮播图效果
Swiper 组件提供滑动轮播显示的能力。Swiper 本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。
循环播放
通过 loop 属性控制是否循环播放，该属性默认值为 true。
当 loop 属性为 true 的时候可以循环多次播放，否则只能播放一次。
Swiper(this.swiperController) { Text("0") .width('90%') .height('100%') .backgroundColor(Color.Gray) .textAlign(TextAlign.Center) .fontSize(30)
Text("1") .width('90%') .height('100%') .backgroundColor(Color.Green) .textAlign(TextAlign.Center) .fontSize(30)
Text("2") .width('90%') .height('100%') .backgroundColor(Color.Blue) .textAlign(TextAlign.Center) .fontSize(30)}.loop(true)
复制代码
自动播放
Swiper 通过设置 autoPlay 属性，控制是否自动轮播子组件。该属性默认值为 false。
Swiper(this.swiperController) { Text("0") .width('90%') .height('100%') .backgroundColor(Color.Gray) .textAlign(TextAlign.Center) .fontSize(30)
Text("1") .width('90%') .height('100%') .backgroundColor(Color.Green) .textAlign(TextAlign.Center) .fontSize(30)
Text("2") .width('90%') .height('100%') .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30)}.loop(true).autoPlay(true).interval(1000)
复制代码
不需要人为操控。
导航点样式
Swiper 提供了默认的导航点样式，导航点默认显示在 Swiper 下方居中位置，开发者也可以通过 indicatorStyle 属性自定义导航点的位置和样式。
Swiper(this.swiperController) { Text("0") .width('90%') .height('100%') .backgroundColor(Color.Gray) .textAlign(TextAlign.Center) .fontSize(30)
Text("1") .width('90%') .height('100%') .backgroundColor(Color.Green) .textAlign(TextAlign.Center) .fontSize(30)
Text("2") .width('90%') .height('100%') .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30)}.indicatorStyle({ size: 30, left: 0, color: Color.Red})
复制代码
运行结果：
控制器控制页面切换
Swiper 支持三种页面切换方式：手指滑动、点击导航点和通过控制器。
Column({ space: 5 }) { Swiper(this.swiperController) { Text("0") .width(250) .height(250) .backgroundColor(Color.Gray) .textAlign(TextAlign.Center) .fontSize(30) Text("1") .width(250) .height(250) .backgroundColor(Color.Green) .textAlign(TextAlign.Center) .fontSize(30) Text("2") .width(250) .height(250) .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30) } .indicator(true)
Row({ space: 12 }) { Button('showNext') .onClick(() => { this.swiperController.showNext(); // 通过controller切换到后一页 }) Button('showPrevious') .onClick(() => { this.swiperController.showPrevious(); // 通过controller切换到前一页 }) }.margin(5) }.width('100%') .margin({ top: 5 })
复制代码
运行效果为：
轮播方向
Swiper 支持水平和垂直方向上进行轮播，主要通过 vertical 属性控制。
当 vertical 为 true 时，表示在垂直方向上进行轮播；为 false 时，表示在水平方向上进行轮播。vertical 默认值为 false。
Swiper(this.swiperController) { ...}.indicator(true).vertical(true)
复制代码
评论