【HarmonyOS Next】如何实时监控Scroll组件水平方向滚动偏移量

【HarmonyOS Next】如何实时监控Scroll组件滚动偏移量

参考官方文档Scroll API

1. scroller控制器

首先我们知道，Scroll组件支持传入可选参数scroller控制器：Scroll(scroller?: Scroller)，而Scroller类维护了一个currentOffset()函数，其返回值为一个OffsetResult对象，通过scroller.currentOffset().xOffset或scroller.currentOffset().yOffset获取当前的滚动偏移量。

scroller:Scroller = new Scroller()
const x = this.scroller.currentOffset().xOffset
const y = this.scroller.currentOffset().yOffset

2. 在事件中实时调用

官方文档提供了两种事件，一种是onScrollStart，它在滚动开始时触发，一种是onDidScroll滚动事件回调，Scroll滚动时触发。而要想实施刷新滚动偏移量，应该采用后者。

如图，按照官方要求，此处需要传入ScrollOnScrollCallback对象，在看ScrollOnScrollCallback对象的源代码，发现它是一个lambda表达式，它返回的是每帧滚动时水平（垂直）方向的偏移量，Scroll中的内容向左滚动时偏移量为正，向右滚动时偏移量为负，单位vp。以及当前滚动状态

实现代码如下：

@Entry
@Component
struct Index{
	@State x: number = 0
	handler:ScrollOnScrollCallback = (xOffset: number, yOffset: number, scrollState: ScrollState) => {
		this.x = xOffset
		...
	}
	scroller: Scroller = new Scroller()
  	build() {
    	Scroll(this.scroller){
    		...
    	}
    	.scrollable(ScrollDirection.Horizontal)
    	.onDidScroll(this.handler)
    }
}

以上代码的效果就是，这个事件更改的参数x是每一帧的滚动偏移量，那有没有办法返回累计的偏移量呢？
我们可以修改上述代码，因为onDidScroll事件中handler为可选参数，于是我们可以直接传入一个返回值为void的lambda表达式，实时更新参数x即可：

@Entry
@Component
struct Index{
	@State x: number = 0
//	handler:ScrollOnScrollCallback = (xOffset: number, yOffset: number, scrollState: ScrollState) => {
//		this.x = xOffset
//		...
//	}
	scroller: Scroller = new Scroller()
  	build() {
    	Scroll(this.scroller){
    		...
    	}
    	.scrollable(ScrollDirection.Horizontal)
//    	.onDidScroll(this.handler)
		.onDidScroll(()=>{
			const x = this.scroller.currentOffset().xOffset
      		this.xOffset = x
		})
    }
}

这样就实现了实时监控水平滚动偏移量