HarmonyOS 鸿蒙Next中AtomicServiceWeb如何获取内容高度，或者实现嵌套滚动场景

HarmonyOS 鸿蒙Next中AtomicServiceWeb如何获取内容高度，或者实现嵌套滚动场景 有个类似商品详情页的场景，详情是html字符串，选择用asw来渲染。但是asw在Scroll容器中不能实现嵌套滚动的交互，同时asw也取消了js注入的接口。

asw不支持NestedScroll属性，也没有获取内容高度的方法。尝试使用js sdk中的postMessage方式在html加载完成后向web发送内容高度，web的onMessage回调也没有响应。

鉴于元服务中arkweb年后要替换，有没有什么方法可以搞定这个场景

3 回复

H5自己调整样式适配或者用原生开发

更多关于HarmonyOS 鸿蒙Next中AtomicServiceWeb如何获取内容高度，或者实现嵌套滚动场景的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，AtomicServiceWeb组件用于承载Web内容。要获取Web内容的高度或实现嵌套滚动场景，可以通过以下方式：

  1. 获取内容高度：

    • 使用WebView的onPageFinished事件，通过JavaScript注入获取页面高度。
    • 示例代码：
      webView.onPageFinished((event) => {
    webView.evaluateJavascript('document.body.scrollHeight', (result) => {
        const height = parseInt(result);
        console.log('Web content height:', height);
    });
});

  2. 实现嵌套滚动：

    • 使用ScrollView或List组件包裹AtomicServiceWeb，并设置nestedScrollEnabled为true。
    • 示例代码：
      Scroll.create() {
    Column.create() {
        AtomicServiceWeb({ src: 'your_web_url' })
            .nestedScrollEnabled(true)
    }
}

在HarmonyOS鸿蒙Next中，AtomicServiceWeb组件可以通过onPageFinish事件来获取网页内容的高度。具体实现如下：

  1. 获取内容高度：在onPageFinish事件中，使用evaluateJavascript方法执行JavaScript代码，通过document.body.scrollHeight获取网页内容的高度，并将结果返回给原生代码。

  2. 实现嵌套滚动：可以使用ScrollView或ListContainer等组件作为外层容器，将AtomicServiceWeb嵌套其中。通过设置AtomicServiceWeb的layoutHeight为match_content，并监听滚动事件，实现内外层的嵌套滚动效果。

示例代码：

webComponent.onPageFinish((event) => {
    webComponent.evaluateJavascript('document.body.scrollHeight', (height) => {
        console.log('Content height:', height);
    });
});

通过这种方式，可以灵活处理网页内容高度及嵌套滚动场景。

回到顶部