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

Posted 2022-12-02 郭梧悠

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官方示例