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官方说明