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 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)

更多关于HarmonyOS鸿蒙Next中如何解决Scroll组件嵌套Web组件滑动冲突问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中如何解决Scroll组件嵌套Web组件滑动冲突问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Scroll组件嵌套Web组件滑动冲突问题

Scroll组件嵌套Web组件滑动冲突问题可以通过以下两种方案解决：

方案一：屏蔽Web响应

在Scroll的onScroll事件中增加判断，当Scroll滑动到底部之前屏蔽所有Web响应。代码示例如下：

private scroller: Scroller = new Scroller();
@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)
回到顶部