HarmonyOS swiper组件滚动距离实时监听

可以使用swiper组件来达到类似的效果，swiper组件中有index属性可以标识当前显示元素的索引(下标)并且支持双向绑定。详情代码如下：

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 {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])
  @State currentIndex: number = 1
  @State showSheet: boolean = false
  @State sheetHeight: number = 300;
  @State showDragBar: boolean = true;
  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 1000; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list)
  }
  @Builder
  pager() {
    Grid() {
      LazyForEach(this.data, (item: number) => {
        GridItem() {
          Text(item.toString())
            .width(30)
            .height(30)
            .border({ width: 1, color: (this.currentIndex + 1) === item ? Color.Red : Color.Gray, radius: 15 })
            .textAlign(TextAlign.Center)
            .onClick(() => {
              this.currentIndex = item - 1
            })
        }
      }, (item: string) => item)
    }.columnsTemplate("1fr 1fr 1fr 1fr").rowsGap(8)
    .width("100%")
    .height("100%")
  }
  build() {
    Column() {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item.toString())
            .width('100%')
            .height("100%")
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) => item)
      }
      .layoutWeight(1)
      .cachedCount(2)
      .index($$this.currentIndex)
      .indicator(false)
      .loop(true)
      .duration(300)
      .curve(Curve.Linear)
      Row({ space: 12 }) {
        Text(`当前在第${this.currentIndex + 1}页,总计${this.data.totalCount()}`)
      }.margin(5)
      .onClick(() => {
        this.showSheet = true
      })
      .bindSheet($$this.showSheet, this.pager(), {
        height: this.sheetHeight,
        dragBar: this.showDragBar,
        onAppear: () => {
          console.log("BindSheet onAppear.")
        },
        onDisappear: () => {
          console.log("BindSheet onDisappear.")
        }
      })
    }.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.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.