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

2022-08-30 约 371 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=126602554

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

HarmonyOS提供了组件实现轮播图效果：

实现代码如下：

  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的值感觉达不到理论计算的位置。

参考资料：

目录

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

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