HarmonyOS 关于Swiper指示器问题

.indicator(new DotIndicator()  
        .itemWidth(lpx(10))  
        .itemHeight(lpx(10))  
        .selectedItemWidth(lpx(10))  
        .selectedItemHeight(lpx(10))  
        .color(0x4DFFFFFF)  
        .right(lpx(34))  
        .bottom(lpx(59))  
        .selectedColor(0xFFFFECC60)  
      )

请问使用圆点指示器,能设置圆点直接的间距吗?

HarmonyOS
2024-10-16 11:53:22
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

原始的Swiper组件无法设置圆点之间的间距,可以使用以下方式设置圆点间间距以及指示器距离底部的距离:

class MyDataSource1 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 {  
  private swiperController: SwiperController = new SwiperController()  
  private data: MyDataSource1 = new MyDataSource1([])  
  @State widthLength: number = 0  
  @State heightLength: number = 0  
  @State currentIndex: number = 0  
  
  aboutToAppear(): void {  
    let list: number[] = []  
    for (let i = 1; i <= 6; i++) {  
      list.push(i);  
    }  
    this.data = new MyDataSource1(list)  
  }  
  build() {  
    Column({ space: 5 }) {  
      Stack({ alignContent: Alignment.Bottom }) {  
        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)  
        .index(0)  
        .autoPlay(false)  
        .interval(4000)  
        .loop(true)  
        .duration(1000)  
        .itemSpace(0)  
        .indicator(false)  
        .curve(Curve.Linear)  
        .onChange((index: number) => {  
          console.info(index.toString())  
          this.currentIndex = index  
        })  
        Row() {  
          LazyForEach(this.data, (item: string, index: number) => {  
            Column()  
              .width(this.currentIndex === index ? 10 : 5)  
              .height(5)  
              .borderRadius(5)  
              .margin(10) // 设置圆点间距  
              .backgroundColor(this.currentIndex === index ? Color.Red : Color.Gray)  
          }, (item: string) => item)  
        }.margin({ bottom: 0 }) // 指示器距离底部距离  
      }  
    }.width('100%').margin({ top: 5 })  
  }  
}
分享
微博
QQ
微信
回复
2024-10-16 16:59:17
相关问题
HarmonyOS Swiper指示器
124浏览 • 0回复 待解决
HarmonyOS Swiper指示器显示错误
137浏览 • 1回复 待解决
HarmonyOS如何自定义Swiper指示器样式?
123浏览 • 0回复 待解决
如何设置swiper指示器不显示
946浏览 • 1回复 待解决
HarmonyOS Swiper循环问题
368浏览 • 1回复 待解决
HarmonyOS swiper + LazyForEach使用问题
274浏览 • 1回复 待解决
HarmonyOS swiper组件的使用问题
275浏览 • 1回复 待解决
HarmonyOS Swiper+ForEach使用问题
299浏览 • 1回复 待解决
HarmonyOS 关于crash问题
289浏览 • 1回复 待解决
HarmonyOS关于navigation问题
514浏览 • 1回复 待解决
HarmonyOS 关于taskpool的问题
197浏览 • 1回复 待解决
HarmonyOS 关于ColorFilter的问题
394浏览 • 1回复 待解决
HarmonyOS 关于Map语法问题
297浏览 • 1回复 待解决
HarmonyOS 关于onKeyEvent不生效问题
303浏览 • 1回复 待解决
HarmonyOS 关于@Watch监听状态问题
418浏览 • 1回复 待解决
HarmonyOS关于混淆强度相关问题
444浏览 • 1回复 待解决
HarmonyOS 关于Navigation组件的问题
416浏览 • 1回复 待解决
HarmonyOS 关于Web调试的问题
190浏览 • 1回复 待解决
HarmonyOS 关于C API的问题
162浏览 • 1回复 待解决