HarmonyOS--创建轮播（Swiper）

文章目录

• • 概要
  • 整体架构流程
  • 技术名词解释
  • 技术细节
  • 小结

概要

   Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。

---

整体架构流程

创建轮播：

      Swiper() {
        Text("I")
          .width('100%')
          .height('50%')
          .backgroundColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)

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

        Text("you")
          .width('100%')
          .height('50%')
          .backgroundColor(Color.Blue)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }

这是一个轮播图，如果要限制一直轮播，就需要通过loop属性控制是否循环播放，该属性默认值为

true。

1.循环播放：

  Swiper() {
        Text("I")
          .width('100%')
          .height('50%')
          .backgroundColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)

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

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

Edge Image Viewer (dbankcdn.com)https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20240320153843.69834462651195710495432239597666:50001231000000:2800:F1FA6B56E495FF59BD26CF5107D7DF475D4F63C1F438D667A04844F6BCB57B64.gif?needInitFileName=true?needInitFileName=true2.自动轮播：

  Swiper() {
        Text("I")
          .width('100%')
          .height('50%')
          .backgroundColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)

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

        Text("you")
          .width('100%')
          .height('50%')
          .backgroundColor(Color.Blue)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
      .autoPlay(true)
      .interval(5000)

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

Edge Image Viewer (dbankcdn.com)https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtyPub/011/111/111/0000000000011111111.20240320153843.67875776085201587782070669947495:50001231000000:2800:C53E4470CD69BCC32179A1E3E097CB5031DBA71A485A46579B618E63DBBCA75D.gif?needInitFileName=true?needInitFileName=true3.导航点：

      Swiper() {
        Text("I")
          .width('100%')
          .height('50%')
          .backgroundColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)

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

        Text("you")
          .width('100%')
          .height('50%')
          .backgroundColor(Color.Blue)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
      .autoPlay(true)
      .interval(5000)
      .indicatorStyle({
        size: 30,
        left: 0,
        color: Color.Red
      })

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

---

技术名词解释

1.loop：控制是否循环播放，该属性默认值为true。

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

2.autoPlay：控制是否自动轮播子组件。该属性默认值为false。

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

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

Swiper提供了默认的导航点样式，导航点默认显示在Swiper下方居中位置，也可以通过indicatorStyle属性自定义导航点的位置和样式。

---

技术细节

1.注意属性等需要写在Swiper内。

2.格式一定需要写对，不要写的错综复杂。

---

小结

利用Swiper组件，在一些应用首页显示推荐的内容时，可以用到轮播显示的能力。