【HarmonyOS NEXT】Scroll嵌套Web组件时，如何设置Web组件高度

最新推荐文章于 2024-10-09 13:38:26 发布

Mayism123

最新推荐文章于 2024-10-09 13:38:26 发布

阅读量521

点赞数 5

文章标签： harmonyos

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

版权

【关键字】

Web组件 / 嵌套 / 滚动 / 高度

【问题描述】

项目中有一个项目详情页面，会嵌套多个Web组件来显示HTML的详情内容。Scroll嵌套Web组件时，不设置Web组件的高度，Web组件就无法显示。但如果设置高度，无法计算出Web内容加载出来的完整高度。此场景该如何实现设置Web组件高度？

【解决方案】

使用nestedScroll来负责交换嵌套滚动，实现父容器滚动到底部时平滑滚动到子组件。当前对于组件的滑动不流畅可尝试使用friction属性设置滑动惯性，参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll-0000001815927632#ZH-CN_TOPIC_0000001815927632__%E5%B1%9E%E6%80%A7

参考Demo:

import web_webview from '@ohos.web.webview';
@Entry
@Component
struct ScollerWebPage {
private scrollerForScroll: Scroller = new Scroller()
        controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
    Flex() {
        Scroll(this.scrollerForScroll) {
            Column() {
                Text("原生区域")
        .width("100%")
        .height("40%")
        .backgroundColor(0X330000FF)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        Web({ src: 'www.harmonyos.com', controller: this.controller })
        .height("200%")
        .nestedScroll({scrollForward: NestedScrollMode.SELF_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST})
        Web({ src: 'www.harmonyos.com', controller: this.controller })
        .height("200%")
        .nestedScroll({scrollForward: NestedScrollMode.SELF_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST})
            }
        }
        .friction(0.1) //
        }
        .width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
}}