HarmonyOS提供了Swiper组件实现轮播图效果:
在这里插入图片描述
实现代码如下:

  Swiper() {
        Image($rawfile('computer/computer1.png'))
          .height(200)
          .width('100%')
        Image($rawfile('computer/computer2.png'))
          .height(200)
          .width('100%')
        Image($rawfile('computer/computer3.png'))
          .height(200)
          .width('100%')
        Image($rawfile('computer/computer4.png'))
          .height(200)
          .width('100%')
      }
      .index(0)
      .autoPlay(true)//自动播放
      .interval(2000)
      .indicatorStyle({
        color: Color.Gray,//未选中的颜色
        selectedColor:Color.Red//设置选中的导航点的颜色。
      })
      .loop(true)//开启循环轮播
      .height(250)
      .width('100%')

如果想让导航点在上面展示(如下图),该怎么办呢?
在这里插入图片描述
很简单,修改indicatorStyletop值,代码如下:

  .indicatorStyle({
        color: Color.Gray,//未选中的颜色
        selectedColor:Color.Red,//设置选中的导航点的颜色。
        top:0//设置导航点距离Swiper组件顶部的距离。
      })

另外indicatorStyletopbottom属性感觉有点迷惑,设置了大于0的值感觉达不到理论计算的位置。

参考资料:
Swiper官方说明
Swiper官方示例

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐