HarmonyOS NEXT应用开发之swiper指示器导航点位于swiper下方

使用说明

1. 加载完成后swiper指示器导航点，位于显示内容下方。

实现思路

1. 将swiper区域分割为两块区域，上方为内容区域，下方为空白区域。 源码参考IndicatorBelowSwiper.ets。

Column() {
  Image(item)
    .width($r('app.string.one_hundred_percent'))
    .height($r('app.string.thirty_percent'))
    .borderRadius($r('app.integer.borderRadius_value'))

  Column()
    .width($r('app.string.one_hundred_percent'))
    .height($r('app.integer.blank_space_height'))
}

2. 通过indicator属性调整指示器导航点位置，使其位于空白区域。 源码参考IndicatorBelowSwiper.ets。

Swiper(this.swiperController) {
  ...
}
.width($r('app.string.ninety_five_percent'))
.loop(true)
.autoPlay(true)
.indicator(new DotIndicator().botto