HarmonyOS Swiper容器中的indicator可以设置偏移么

能否实现将圆点指示器放置在下图红框位置,API中没有发现设置指示器便宜的方法,如果将swiper整体高度增加会导致上面视图(内容部分)下移。

HarmonyOS
2024-12-25 13:15:27
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

目前Swiper的indicator只支持固定样式,可以通过以下方式自行实现:

1、可以自定义UI来完成自定义的指示器,通过onAnimationStart,onAnimationEnd和onGestureSwipe三个事件回调来完成相关动画的绑定。

2、也可以引入三方库来实现自定义指示器,参考文档:https://gitee.com/openharmony-sig/ohos_banner

@Entry
@Component
export struct SwiperComponent {
  private swiperController: SwiperController = new SwiperController()
  @State currentIndex: number = 0;
  @State swiperData: string[] = ['', '', ''];

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text('0')
          .width('90%')
          .height('50%')
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('1')
          .width('90%')
          .height('50%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('2')
          .width('90%')
          .height('50%')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .indicator(false)
      .autoPlay(true)
      .onChange(index => {
        this.currentIndex = index;
      })

      Row({ space: 10 }) {
        ForEach(this.swiperData, (item: string, index: number) => {
          Shape() {
            Rect()
              .width(50)
              .height(10)
              .radius(5)
              .fill(index !== this.currentIndex ? Color.Black : Color.Red)
              .fillOpacity(0.6)
          }
        })
      }
      .margin({ top: 12 })
    }
    .width('100%')
  }
}
分享
微博
QQ
微信
回复
2024-12-25 15:55:50
相关问题
Swiperindicator后续会支持自定义吗
2193浏览 • 1回复 待解决
HarmonyOS 组件/容器设置背景样式
614浏览 • 1回复 待解决
如何设置Swiper导航点样式?
589浏览 • 1回复 待解决