uni-app webview访问网页内容显示不全

uni-app webview访问网页内容显示不全

用plus创建的子webview访问远程网页，网页总是底部有一部分显示不出来，滚动条也拉不到底部，请问这种是什么问题？

如下图，浏览uniapp官网底部也没显示全，滚动条也拉不到

image

完整示例demo在附件

test.zip


更多关于uni-app webview访问网页内容显示不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

完整示例demo发出来 HX什么版本呢 测试机型都说下

更多关于uni-app webview访问网页内容显示不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HX 3.1.18.20210609 , 机型: vivo nex s， demo在附件中

这个问题有什么进展了吗？

回复 wcomdex: 已安排复现了

你需要指定一下 bottom:0, 否则按全高计算

回复 DCloud_Android_ST: 的确是这个问题，已解决，谢谢

这是一个常见的 webview 布局问题，主要原因是页面高度计算不准确导致。问题通常出现在混合开发模式下，webview 未能正确获取到内容高度。

核心解决方案是调整 webview 的样式配置：

  1. 在创建 webview 时设置 top 和 bottom 属性为 ‘0px’，确保 webview 占满整个屏幕：
var wv = plus.webview.create(url, 'webview', {
  top: '0px',
  bottom: '0px'
});
  1. 检查页面是否存在固定定位的底部元素，这类元素可能导致高度计算异常。可以尝试在目标网页的 CSS 中添加：
html, body {
  height: 100%;
  overflow: auto;
}
  1. 对于动态内容加载的页面，需要在内容加载完成后手动刷新 webview 布局：
wv.addEventListener('loaded', function() {
  setTimeout(function() {
    wv.evalJS("document.body.style.height = document.body.scrollHeight + 'px'");
  }, 300);
});
回到顶部