HarmonyOS Scroll监听？

Question

怎么监听Scroll向上滑动了50.0vp,100.0vp,150.0vp，分别让Scroll内部的指定Row容器背景色分别进行色值变化设置

Answer 1

可以用this.scroller.currentOffset().yOffset作为滑动距离的标准，用onScrollFrameBegin回调进行监听

// xxx.ets
@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  @State bgColor:string = '#FFF';

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Scroll(this.scroller) {
        Column() {
          ForEach(this.arr, (item: number) => {
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 })
              .backgroundColor(this.bgColor)
          }, (item: string) => item)
        }.width('100%')
      }
      .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
      .scrollBar(BarState.On) // 滚动条常驻显示
      .scrollBarColor(Color.Gray) // 滚动条颜色
      .scrollBarWidth(10) // 滚动条宽度
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring)
      .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
        // console.info(xOffset + ' ' + yOffset)
      })
      .onScrollEdge((side: Edge) => {
        // console.info(JSON.stringify(side))
      })
      .onScrollStop(() => {
        // console.info('Scroll Stop')
      })
      .onScrollFrameBegin((offset: number)=>{
        if(this.scroller.currentOffset().yOffset>0){
          this.bgColor = '#FFF'
        }
        if(this.scroller.currentOffset().yOffset>150){
          this.bgColor = '#999'
        }
        if(this.scroller.currentOffset().yOffset>300){
          this.bgColor = '#333'
        }
        return { offsetRemain: offset };
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
  }
}