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

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

我看有过期的indicatorStyle属性,只不过最底部bottom为0不是我想要的,我想要更下面一点,要怎么偏移处理呢

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以参考这个链接: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

分享
微博
QQ
微信
回复
2天前
相关问题
Swiper组件如何设置导航点位置
2456浏览 • 1回复 待解决
HarmonyOS 输入框光标移位监听
78浏览 • 1回复 待解决
HarmonyOS怎么调整Radio选项框位置
456浏览 • 1回复 待解决
HarmonyOS 怎么去掉底部导航栏
88浏览 • 1回复 待解决
HarmonyOS 如何获取设备唯一标识
316浏览 • 2回复 待解决