HarmonyOS 鸿蒙Next web组件加载html文本，内容多的时候没法上下滚动
HarmonyOS 鸿蒙Next web组件加载html文本，内容多的时候没法上下滚动
demo如下：
import web_webview from ‘@ohos.web.webview’
@Preview
@Component
struct DemoPage {
loadString: string = “<!DOCTYPE html>\n” +
“<html>\n” +
" \t<head>\n" +
" \t\t<meta charset=“utf-8”>\n" +
" \t\t<title>一封回信</title>\n" +
" </head>\n" +
" <body>\n" +
" \n" +
" \t<div align=“center”>//这里align属性是让文字居中显示，也可以不加，文字会顶格显示。\n" +
" \t\t<h3>一封回信</h3>\n" +
" \t\t<p>今天回来的时候，坐在车上，想起来，初中时候和同学的话：\n" +
" \t\t</p>\n" +
" \t\t<p>以后不开车，要请一个司机来。</p>\n" +
" \t\t<p>因为我晕车，但是现在我心中一想，以后我肯定开车接你</p>\n" +
" \t\t<p>还要带你去很多地方</p>\n" +
" \t\t<p>我突然恍悟</p>\n" +
" \t\t<p>原来爱一个人，真的就可以为她破例任何事情。\n" +
" \t\t</p>\n" +
" \t\t<p>而且只有你能让我情愿做这些事</p>\n" +
" \t\t<p></p>\n" +
" \t\t<p>也只可以为你破例</p>\n" +
" \t\t<p>甚至可以很多次的破例</p>\n" +
" \t\t<h3>所以这封回信</h3>\n" +
" \t\t<p>我就是想和你说</p>\n" +
" \t\t<p>我会为你破例任何以前我不接受的事</p>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" <ul>\n" +
" <li>红楼梦</li>\n" +
" </ul>\n" +
" \t</div>\n" +
" </body>\n" +
“</html>”
private readonly webController = new web_webview.WebviewController();
build() {
Web({ src: ‘’, controller: this.webController })
.onPageBegin(() => {
this.webController.loadData(
this.loadString,
“text/html”,
“utf-8”
);
})
}
}
可以看一下本地自适应案例：
import { webview } from '@kit.ArkWeb';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
webContent: string =
"<p>，三月</p><p><img src=\"https://qiance.qianfanyun.com/1539566909.gif\" title=\"1539566909.gif\" alt=\"0133e75674ca4332f8759f043f3536.gif\"/></p>"
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src: '', controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
.layoutMode(WebLayoutMode.FIT_CONTENT)
.onControllerAttached(() => {
this.controller.loadData(this.webContent, "text/html", "UTF-8", 'https://qianfan1.qianfanapi.com/v5_0/')
})
}.backgroundColor(Color.Blue).height('100%').width('100%')
}
}
[@Preview](/user/Preview)
[@Component](/user/Component)
struct DemoPage {
[@State](/user/State) loadString: string = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一封回信</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body {
padding: 10px;
}
</style>
</head>
<body>
<div style="width:100%;">
<!-- 原有内容 -->
</div>
</body>
</html>
`
private readonly webController = new web_webview.WebviewController();
build() {
Column() {
Web({
src: ‘’,
controller: this.webController
})
.width(‘100%’)
.height(‘100%’)
.scrollable(true) // 明确启用滚动
.domBlockedEnabled(true) // 启用DOM阻塞
.verticalScrollBarEnabled(true) // 显示垂直滚动条
.onPageBegin(() => {
// 使用loadData加载HTML内容
this.webController.loadData(
this.loadString,
“text/html”,
“utf-8”
);
})
.onLoadIntercept((event) => {
// 拦截加载事件，确保内容正确加载
return false;
})
}
.height(‘100%’)
}
}
有帮助的话帮忙点个关注哈
针对HarmonyOS 鸿蒙Next web组件加载html文本时，内容多无法上下滚动的问题，以下是一些可能的解决方案：
- 检查Web组件属性：确保Web组件的
scrollable属性设置为true，以允许滚动。同时，检查是否有其他属性如layoutMode等影响了滚动行为。 - 使用nestedScroll属性：如果Web组件嵌套在Scroll组件中，确保Scroll组件使用了
nestedScroll属性，并合理配置其滚动行为（如scrollForward和scrollBackward），以支持嵌套滚动。 - 检查HTML内容：确保HTML内容没有额外的空白区域或未正确关闭的标签，这些都会影响Web组件的高度计算和滚动行为。
- 调整Web组件大小：确保Web组件有明确的宽度和高度设置，或者使用
layoutMode(WebLayoutMode.FIT_CONTENT)使Web组件的大小根据页面内容自适应变化。
如果以上方法均无法解决问题，可能是由于鸿蒙系统的版本或Web组件的某些特性导致的。建议检查鸿蒙系统的版本和API文档，以确认是否有相关的已知问题或更新。如果问题依旧没法解决，请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。
