HarmonyOS鸿蒙学习笔记（8）Swiper实现轮播滚动效果

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%')

如果想让导航点在上面展示（如下图），该怎么办呢？ 很简单，修改indicatorStyle的top值,代码如下：

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

另外indicatorStyle的top和bottom属性感觉有点迷惑，设置了大于0的值感觉达不到理论计算的位置。

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