Can the swiper indicator be set to have a scrollable layout outside

#huawei #harmony #harmonyos

Read the original article：Can the swiper indicator be set to have a scrollable layout outside

Context

Working with a Swiper component in HarmonyOS and asks whether the indicator (e.g., dots) can be placed outside of the scrollable content area. They also wonder if a custom indicator is necessary to achieve this layout.

Description

The user submitted an image and asked if the indicator can be visually moved outside of the Swiper's scroll area. They are uncertain whether this requires a completely custom indicator or if it can be achieved using existing component properties. The goal is to improve UI layout by positioning navigation indicators more flexibly.

Solution / Approach

Setting a negative bottom value for the indicator.
Applying margin or padding to the content inside the Swiper (e.g., margin({ bottom: 36 })).

This shifts the indicator downward, effectively placing it outside the visible scroll area.

Relevant API: https://developer.huawei.com/consumer/en/doc/harmonyos-references-V5/ts-container-swiper-V5#indicator

Code sample:

@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%')
          }
          .margin({ bottom: 36 })
        }, (item: ResourceStr, index: number) => `${index}`)
      }
      .indicator(
        // Set dot navigation point style
        new DotIndicator().itemWidth(15)
          .itemHeight(15)
          .selectedItemWidth(15)
          .selectedItemHeight(15)
          .color(Color.Gray)
          .selectedColor(Color.Blue)
          .bottom(0)).width('100%').height(300)
    }
  }
}

You can change .bottom(0) to .bottom(-20) or similar to shift the indicator outside.

Key Takeaways

A custom indicator is not required for moving the Swiper indicator outside the content area.
Adjusting the bottom position and adding margin or padding to the Swiper's content is sufficient.
HarmonyOS provides flexible layout controls via DotIndicator and related styling options.
Always refer to the official API reference for up-to-date layout capabilities.