HarmonyOS 监听List组件滑动

想要实现滚动List列表，顶部导航背景色透明度渐变效果，通过onDidScroll（）实现，代码如下：

List({ space: 10, scroller: this.listScroller }) {
  ListItemGroup() {
    ListItem() {

    }
    .width('100%')
    .height(100)
  }

  ListItemGroup({ header: this.itemHead('A') }) {
    ListItem() {
      Text('北京').fontSize(24)
    }

    ListItem() {
      Text('杭州').fontSize(24)
    }

    ListItem() {
      Text('上海').fontSize(24)
    }
  }
  .borderRadius(6)
  // .width(px2vp(display.getDefaultDisplaySync().width)-28)

  ListItemGroup({ header: this.itemHead('B') }) {
    // 循环渲染分组B的ListItem
    ListItem() {
      Text('北京').fontSize(24)
    }

    ListItem() {
      Text('杭州').fontSize(24)
    }

    ListItem() {
      Text('上海').fontSize(24)
    }
  }
  .backgroundColor(Color.White)
  .borderRadius(6)
  .width(px2vp(display.getDefaultDisplaySync().width)-28)
  .margin({ left: 14, right: 14 })

  ListItemGroup({ header: this.itemHead('B') }) {
    // 循环渲染分组B的ListItem
    ListItem() {
      Text('北京').fontSize(24)
    }

    ListItem() {
      Text('杭州').fontSize(24)
    }

    ListItem() {
      Text('上海').fontSize(24)
    }
  }
  .backgroundColor(Color.White)
  .borderRadius(6)
  .width(px2vp(display.getDefaultDisplaySync().width)-28)
  .margin({ left: 14, right: 14 })
}
.width(LUCCUIConstants.LUCCUI_FULL_SIZE)
.height(LUCCUIConstants.LUCCUI_FULL_SIZE)
.backgroundColor(Color.Transparent)
.scrollBar(BarState.Off)
.alignListItem(ListItemAlign.Start)
.onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
  this.imageOffsetY = scrollOffset
  if (scrollOffset > 0 && scrollOffset < 50) {
    this.naviModel.bgOpacity = scrollOffset/50.0
  } else {
    this.naviModel.bgOpacity = scrollOffset<=0 ? 0 : 1
  }
})
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.