HarmonyOS 如何设置swiper组件中DotIndicator指示器的位置在swiper的外部

如何将swiper组件中DotIndicator指示器的位置设置在其外部的下边？设置属性.bottom(-10)没有效果，不能设置为负数吗？

HarmonyOS

shlp

2024-12-26 15:06:32

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

bottom属性目前设置负数无效，可以通过如下方案设置指示器显示在swiper的外部。

1、通过设置一个height为35的空Column：

@Entry
@Component
struct TestSwipper {
  private bannerInfo: number[] = [1, 2, 3, 4, 5, 6]
  build() {
    if (this.bannerInfo && this.bannerInfo.length > 0) {
      Swiper() {
        ForEach(this.bannerInfo, (item: number, index: number) => {
          Column() {
            Text(item.toString())
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Pink)

            Column() {
            }.width('100%')
            .height(35)
          }
        })
      }
      .cachedCount(2)
      .autoPlay(true)
      .interval(3000)
      .vertical(false)
      .loop(true)
      .margin({ left: "16vp", right: "16vp" })
      .indicator(
        new DotIndicator()
          .bottom(0)
          .itemWidth("8vp")
          .itemHeight("8vp")
          .selectedItemWidth("8vp")
          .selectedItemHeight("8vp")
          .color(Color.Gray)
          .selectedColor(Color.Orange)
      )
    }
  }
}

2、通过设置margin bottom：

@Entry
@Component
struct TestSwipper {
  private bannerInfo: number[] = [1, 2, 3, 4, 5, 6]
  build() {
    if (this.bannerInfo && this.bannerInfo.length > 0) {
      Swiper() {
        ForEach(this.bannerInfo, (item: number, index: number) => {
          Column() {
            Text(item.toString())
              .width('100%')
              .height(100)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Pink)
              .margin({bottom:35})
          }
        })
      }
      .cachedCount(2)
      .autoPlay(true)
      .interval(3000)
      .vertical(false)
      .loop(true)
      .margin({ left: "16vp", right: "16vp" })
      .indicator(
        new DotIndicator()
          .bottom(0)
          .itemWidth("8vp")
          .itemHeight("8vp")
          .selectedItemWidth("8vp")
          .selectedItemHeight("8vp")
          .color(Color.Gray)
          .selectedColor(Color.Orange)
      )
    }
  }
}