HarmonyOS 滚动事件相关的解决方案

请参考如下demo

@Entry
@Component
struct GridExample {
  @State numbers: String[] = ['0', '1', '2', '3', '4','0', '1', '2', '3',
    '4','0', '1', '2', '3', '4','0', '1', '2', '3', '4','0',
    '1', '2', '3', '4','0', '1', '2', '3', '4']
  scroller: Scroller = new Scroller()
  @State gridPosition: number = 0 //0代表滚动到grid顶部，1代表中间值，2代表滚动到grid底部。
  @State progressValue: number = 0    // 设置进度条初始值为0
  @State ViewWidth: number = 300 //grid的宽度
  build() {
    Column({ space: 5 }) {
      Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Grid(this.scroller) {
        ForEach(this.numbers, (day: string) => {
          GridItem() {
            Text(day)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width(40)
              .height(80)
              .textAlign(TextAlign.Center)
          }
        })
      }
      .rowsTemplate('1fr')
      .columnsGap(10)
      .friction(0.6)
      .enableScrollInteraction(true)
      .supportAnimation(false)
      .multiSelectable(false)
      .edgeEffect(EdgeEffect.Spring)
      .scrollBar(BarState.Off)
      .width(this.ViewWidth)
      .height(80)
      .onScrollIndex((first: number, last: number) => {
        console.info(first.toString())
        console.info(last.toString())
      })
      .onScrollBarUpdate((index: number, offset: number) => {
        console.info("XXX" + 'Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString())
        //当是横向时，index*（宽度+间隔）减去 offset  总长度 数量*长度
        let offest1 = index * (40 + 10) - offset
        let totalLength1 = 40 * this.numbers.length + 10 * (this.numbers.length - 1)
        this.progressValue = offest1/(totalLength1 - this.ViewWidth)
        return { totalOffset: offest1, totalLength: totalLength1}
      })
      Progress({value:0, total:1, type:ProgressType.Linear}).width(200).value(this.progressValue)
    }.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.