HarmonyOS 如何检测Scroll在滚动时，是否滚动到某个子组件的位置

Column() {
  Stack({ alignContent: Alignment.Bottom }) {
    Scroll(this.scrollerForScroll) {
      Column() {
        //今日体重
        Text($r('app.string.pregnancy_weight_today'))
          .fontSize($r('app.float.vp_16'))
          .fontColor($r('app.color.color_black_a'))
          .fontWeight(500)
          .lineHeight($r('app.float.vp_22'))
          .align(Alignment.Center)
          .textAlign(TextAlign.Center)
        //分析与建议
        this.analysisView()
        //填写身高体重
        this.writeHeightAndWeightView()
        //体重管理建议
        PregnancyWeightSuggest().margin({
          top: $r('app.float.vp_8'),
          left: $r('app.float.vp_12'),
          right: $r('app.float.vp_12')
        })
        //底部tip
        this.btmTipText()
      }
    }.height(this.scrollHeight)
    .margin({
      bottom: 60 + this.indicatorHeight + 20 + 20
    })
    .scrollBar(BarState.Off)

    this.addWeightRecordView()
  }
}
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.

上述ArkTS代码中如何检测Scroll滚动到PregnancyWeightSuggest视图的时机？因为当scroll滚动到PregnancyWeightSuggest视图时，需要改变整个背景的颜色。

HarmonyOS

put_get

2025-01-09 17:01:54

浏览

回答 1

按赞同

按时间

Excelsior_abit

可以设置onVisibleAreaChange回调，当组件的可见区域变化发生变化时，触发回调。参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-visible-area-change-event-V5

参考示例如下：

// xxx.ets
@Entry
@Component
struct Test240807 {
  @State value: string = ''
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State isOk: boolean = false;
  @State isOk2: boolean = false;

  build() {
    Scroll() {
      Column({ space: 20 }) {
        Text("Test1")
          .fontSize(16)
          .fontColor(Color.Black)
          .fontWeight(500)
          .lineHeight(22)
          .height("20%")
          .width("100%")
          .backgroundColor(Color.Red)
          .align(Alignment.Center)
          .textAlign(TextAlign.Center)

        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .backgroundColor(0xFFFFFF)
            }
          }, (item: string) => item)
        }.onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
          if (currentRatio > 0) {
            this.isOk2 = false
          }
          if (currentRatio <= 0) {
            this.isOk2 = true
          }
        })

        Text("Test2")
          .fontSize(16)
          .fontColor(Color.Black)
          .fontWeight(500)
          .lineHeight(22)
          .height("20%")
          .width("100%")
          .backgroundColor(Color.Green)
          .align(Alignment.Center)
          .textAlign(TextAlign.Center)
          .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
            if (currentRatio > 1) {
              this.isOk = false
            }
            if (currentRatio <= 1) {
              this.isOk = true
            }
          })

        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .backgroundColor(0xFFFFFF)
            }
          }, (item: string) => item)
        }

        Text("Test3")
          .fontSize(16)
          .fontColor(Color.Black)
          .fontWeight(500)
          .lineHeight(22)
          .height("20%")
          .width("100%")
          .backgroundColor(Color.Orange)
          .align(Alignment.Center)
          .textAlign(TextAlign.Center)
      }
      .backgroundColor(this.isOk && this.isOk2 ? Color.Yellow : Color.Pink)
    }
  }
}
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.

2025-01-09 19:45:09

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 如何检测Scroll在滚动时，是否滚动到某个子组件的位置

订阅鸿蒙技术特刊，精选内容抢先看