HarmonyOS 鸿蒙Next 如何解决Scroll组件嵌套Web组件滑动冲突问题 鸿蒙场景化案例

HarmonyOS 鸿蒙Next 如何解决Scroll组件嵌套Web组件滑动冲突问题 鸿蒙场景化案例

【问题现象】

Scroll组件嵌套Web组件滑动冲突，导致Scroll无法上下滑动。

【背景知识】

触摸测试控制可以设置不同的触摸测试响应模式，影响组件的触摸测试收集结果，最终影响后续的触屏事件分发。

【解决方案】

Web组件和Scroll组件在同一页面时，会存在web获取焦点，导致Scroll无法上下滑动。

解决思路是可以通过设置边界调节来屏蔽其中一个的滑动响应来实现避免冲突的效果。

方案一：屏蔽web响应

可以在Scroll的onScroll事件中增加判断，在Scroll滑动到底部之前屏蔽所有Web响应，不过需要注意的是，如果Web本身也需要滑动的话，该方法不太适用，这种场景下可以使用方案二来处理冲突。

代码示例如下：

private scroller: Scroller = new Scroller();
[@State](/user/State) webEnable: boolean = false
Scroll(this.scroller){
  Web().enable(this.webEnable)
}.onScroll(() => {
  if (this.scroller.isAtEnd()) {
    this.webEnable = true
  } else {
    this.webEnable = false
  }
})
 

方案二：触摸事件传递

可以使用触摸测试控制来规避此种情况，请给显示在上层的节点设置hitTestBehavior为HitTestMode.BLock。详情见参考文档。

代码示例如下：

Scroll(){
  Web({ src:$rawfile("index.htmL"),controller: this.webviewController})
    .width("100%")
    .height(220)
}.hitTestBehavior(HitTestMode.BLock)