HarmonyOS 关于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 })  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.