HarmonyOS Swiper导航点indicator无法到达最底部，还是有一定距离？

Question

Swiper() {

}
.indicator(
  Indicator.dot()
    // 设置导航点距离 Swiper 组件底部的距离。无法到达最底部，还是有一定距离
    .bottom(0)
)

Answer 1

可以参考： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5\#indicator

在设置indicator为负数时,可以给循环内部容器设置padding或margin，让indicator看起来像在内容区域外部

@Entry
@Component
struct Index {
  imgArr: ResourceStr[] = [$r('app.media.background'), $r('app.media.startIcon'), $r('app.media.app_icon')]

  build() {
    Row() {
      Swiper() {
        ForEach(this.imgArr, (item: ResourceStr, index: number) => {
          Stack() {
            Text(`${index}`).zIndex(1).fontSize(36)
            Image(item).width('100%').height('100%')
          }
          // .padding({ bottom: 36 })
          .margin({ bottom: 36 })
        }, (item: ResourceStr, index: number) => `${index}`)
      }
      .indicator(
        // 设置圆点导航点样式
        new DotIndicator().itemWidth(15)
          .itemHeight(15)
          .selectedItemWidth(15)
          .selectedItemHeight(15)
          .color(Color.Gray)
          .selectedColor(Color.Blue)
          .bottom(0)).width('100%').height(300)
    }
  }
}