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 })
  }
}