【HarmonyOS实战开发】ArkUI组件（Swiper）

一、Swiper

1.概述

Swiper可以实现手机、平板等移动端设备上的图片轮播效果，支持无缝轮播、自动播放、响应式布局等功能。Swiper轮播图具有使用简单、样式可定制、功能丰富、兼容性好等优点，是很多网站和移动应用中常用的轮播图插件。

2.布局与约束

Swiper是一个容器组件，如果自身尺寸没有被设置，它会根据子组件大小自动调整自身尺寸。如果开发者给Swiper设置了固定尺寸，那么在轮播过程中，Swiper的尺寸将一直保持设置的固定尺寸。如果未设置固定尺寸，Swiper会根据子组件大小自动调整自身尺寸。

3.循环播放

@Entry
@Component
struct Index {
 private swiperController: SwiperController = new SwiperController()
 build() {
 Swiper(this.swiperController) {
 Text("0")
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Gray)
 .textAlign(TextAlign.Center)
 .fontSize(30)

 Text("1")
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Green)
 .textAlign(TextAlign.Center)
 .fontSize(30)

 Text("2")
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Blue)
 .textAlign(TextAlign.Center)
 .fontSize(30)
 }
 .loop(true)
 }
}

当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。

4.自动轮播

@Entry
@Component
struct Index {
 private swiperController: SwiperController = new SwiperController()
 build() {
 Swiper(this.swiperController) {
 Text("0")
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Gray)
 .textAlign(TextAlign.Center)
 .fontSize(30)

 Text("1")
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Green)
 .textAlign(TextAlign.Center)
 .fontSize(30)

 Text("2")
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Pink)
 .textAlign(TextAlign.Center)
 .fontSize(30)
 }
 .loop(true)
 .autoPlay(true)
 .interval(2000)
 }
}

autoPlay为true时，会自动切换播放子组件，子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为2000，单位毫秒。

5.导航点样式

@Entry
@Component
struct Index {
 private swiperController: SwiperController = new SwiperController()
 build() {
 Swiper(this.swiperController) {
 Text("0")
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Gray)
 .textAlign(TextAlign.Center)
 .fontSize(30)

 Text("1")
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Green)
 .textAlign(TextAlign.Center)
 .fontSize(30)

 Text("2")
 .width('100%')
 .height('100%')
 .backgroundColor(Color.Pink)
 .textAlign(TextAlign.Center)
 .fontSize(30)
 }
 .indicatorStyle({
 size: 30,
 left: 0,
 color: Color.Red
 })
 }
}

通过indicatorStyle属性，开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置，同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。

6.页面切换方式

Swiper支持三种页面切换方式：手指滑动、点击导航点和通过控制器

@Entry
@Component
struct Index {
 private swiperController: SwiperController = new SwiperController();

 build() {
 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('下一页')
 .onClick(() => {
 this.swiperController.showNext(); // 通过controller切换到后一页
 })
 Button('上一页')
 .onClick(() => {
 this.swiperController.showPrevious(); // 通过controller切换到前一页
 })
 }.margin(5)
 }.width('100%')
 .margin({ top: 5 })
 }
}

7.轮播方向

vertical为true时，表示在垂直方向上进行轮播；为false时，表示在水平方向上进行轮播。vertical默认值为false

@Entry
@Component
struct Index {
 private swiperController: SwiperController = new SwiperController();

 build() {
 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).vertical(false)

 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).vertical(true)
 }
 }
}

8.每页显示多个子页面

Swiper支持在一个页面内同时显示多个子组件，通过displayCount属性设置

@Entry
@Component
struct Index {
 private swiperController: SwiperController = new SwiperController();

 build() {
 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)
 Text("3")
 .width(250)
 .height(250)
 .backgroundColor(Color.Blue)
 .textAlign(TextAlign.Center)
 .fontSize(30)
 }
 .indicator(true)
 .displayCount(2)
 }
}

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (HarmonyOS)开发入门教学视频》

《鸿蒙生态应用开发V3.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档