HarmonyOS DigitIndicator的背景怎么设置

Swiper的DigitIndicator的背景怎么设置,没找到相关属性?

.indicator(Indicator.digit() // 设置数字导航点样式
  .right(40)
  .bottom(10)
    // .top(200)
  .fontColor(Color.Black)
  .selectedFontColor(Color.Black)
  .digitFont({ size: 17, weight: FontWeight.Bold })
  .selectedDigitFont({ size: 13, weight: FontWeight.Normal }))
HarmonyOS
2025-01-09 15:53:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

请参考下:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5#示例1

可以自定义下indicator来实现这个效果,为您提供下面的demo做参考:

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  @State curIndex: number = 1;
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list)
  }
  build() {
    Column({ space: 5 }) {
      Stack() {
        Swiper(this.swiperController) {
          LazyForEach(this.data, (item: string) => {
            Text(item.toString())
              .width('90%')
              .height(160)
              .backgroundColor(0xAFEEEE)
              .textAlign(TextAlign.Center)
              .fontSize(30)
          }, (item: string) => item)
        }
        .cachedCount(2)
        .autoPlay(true)
        .interval(4000)
        .indicator(false)
        .loop(true)
        .duration(1000)
        .itemSpace(0)
        .displayArrow(true, false)
        .onChange((index: number) => {
          this.curIndex = index+1;
        })

        Row() {
          Text(this.curIndex + '').fontSize(20)
          Text('/')
          Text(this.data.totalCount() + '')
        }
        .backgroundColor('#bb999999')
        .padding({
          top: 2,
          right: 8,
          bottom: 2,
          left: 8
        })
        .borderRadius(8)
        .offset({ x: 120, y: 60 })
      }

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() => {
            this.swiperController.showNext()
          })
        Button('showPrevious')
          .onClick(() => {
            this.swiperController.showPrevious()
          })
      }.margin(5)
    }
    .width('100%')
    .margin({ top: 5 })
  }
}
分享
微博
QQ
微信
回复
2025-01-09 17:43:15
相关问题
HarmonyOS 背景半透明渐变怎么设置
371浏览 • 1回复 待解决
openharmony怎么设置背景透明模糊?
6915浏览 • 1回复 待解决
HarmonyOS 如何设置SubWindow背景颜色
267浏览 • 1回复 待解决
HarmonyOS 如何设置布局背景阴影
173浏览 • 1回复 待解决
HarmonyOS 如何给span背景设置padding
140浏览 • 1回复 待解决
HarmonyOS 组件/容器设置背景样式
759浏览 • 1回复 待解决
如何设置窗口背景
2148浏览 • 1回复 待解决
如何设置WebView背景色?
988浏览 • 1回复 待解决
HarmonyOS 设置冷启动背景
890浏览 • 1回复 待解决
HarmonyOS Select组件背景色如何设置
313浏览 • 1回复 待解决
HarmonyOS Navigation标题居中,背景设置
1475浏览 • 1回复 待解决
HarmonyOS UIAbility如何设置透明背景
367浏览 • 1回复 待解决
如何设置子窗口背景颜色?
616浏览 • 1回复 待解决
HarmonyOS Tabs组件bar背景设置问题
916浏览 • 1回复 待解决
如何设置卡片背景为透明
3164浏览 • 1回复 待解决
XComponent组件如何设置背景颜色
2494浏览 • 1回复 待解决
JS 卡片背景颜色怎么修改呢?
7140浏览 • 3回复 待解决
HarmonyOS 如何设置页面背景半透明
351浏览 • 1回复 待解决
HarmonyOS 如何设置背景透明度
312浏览 • 1回复 待解决