【HarmonyOS NEXT】List组件嵌套Web组件时出现滑动冲突

最新推荐文章于 2024-08-18 21:43:11 发布

Mayism123

最新推荐文章于 2024-08-18 21:43:11 发布

阅读量893

点赞数 4

文章标签： harmonyos

本文链接：https://blog.csdn.net/Mayism123/article/details/136940651

版权

文章讲述了在HarmonyOS的List组件中嵌套Web组件导致的滑动冲突问题，提供了解决方案，包括使用hitTestBehavior属性屏蔽Web组件的触摸控制以及通过nestedScroll设置Web组件的嵌套滑动模式。特别指出该方法适用于API11及以上版本。

摘要由CSDN通过智能技术生成

【关键字】

List组件 / Web组件 / 嵌套 / 滑动 / 滚动 / hitTestBehavior / API 11

【问题描述】

在List组件中嵌套Web组件时，Web组件会获取焦点，导致List无法上下滑动。

【解决方案】

可根据实际需求场景选择对应方案解决上述问题：

可以在外层的List组件上添加hitTestBehavior(HitTestMode.Block)属性，屏蔽内层Web组件的触摸控制来实现List滑动。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-hit-test-behavior-0000001774280874
如仅希望拦截Web组件的滑动事件但不拦截其点击事件，可通过设置Web组件嵌套滑动为父组件先滚动来实现父组件滑动到底部后再进行Web组件自身的滑动。示例代码如下：

List({ space: 20, initialIndex: 0, scroller: this.scrollerForList }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Web({ src: 'https://www.baidu.com', controller: this.webController })
.width('100%')
.height(200)
.nestedScroll({scrollForward:NestedScrollMode.PARENT_FIRST,scrollBackward: NestedScrollMode.PARENT_FIRST})
}
})
}

Web组件嵌套滑动参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-nested-scrolling-0000001774120278

注意：Web组件嵌套滑动仅支持API 11。