HarmonyOS Swiper的圆点底部页码标识怎么偏移位置，向下移动？

Question

Swiper的圆点底部页码标识怎么偏移位置，向下移动？

我看有过期的indicatorStyle属性，只不过最底部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 demoA {
  @State message: string = 'Hello World';
  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(-20)
      )
      .width('100%')
      .height(300)
    }
  }
}

备选方案可以引入三方库来实现自定义指示器，参考文档 https://gitee.com/openharmony-sig/ohos\_banner