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)icon-default.png?t=N7T8https://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)icon-default.png?t=N7T8https://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组件,在一些应用首页显示推荐的内容时,可以用到轮播显示的能力。

  • 29
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值