uniapp: webview全屏遮挡住状态栏的解决方案

最新推荐文章于 2024-05-16 23:47:56 发布
最新推荐文章于 2024-05-16 23:47:56 发布
阅读量5.8k 收藏 4
点赞数 2
文章标签： vue html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59638694/article/details/123804782
版权

什么是webview？
应用场景
我在页面调用webview导航栏被webview给覆盖住了
https://blog.csdn.net/weixin_45360473/article/details/115006620
转载的，我又加了一下我的分析和应用场景。
在这里插入图片描述
在这里插入图片描述
网上搜的结果也不尽人意没办法只能网上找资源，然后主要的就是在wv.setstyle()这里的height：height
底部会被最下面的返回条遮住（地下红框的地方），
改成height：height - statusbar 之后就好了，应该是底部的导航栏给去掉了
感谢，写这位的大佬帮我解决，我也来转载加上自己的分析

最低0.47元/天 解锁文章
米法老婆塞尔达
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
WebView的基本常用属性 及方法
cxc_cpf的博客
09-06 542
一、在xml布局文件中定义WebView标签 android:id="@+id/wv" android:layout_width="match_parent" android:layout_height="match_parent" /> 二、在activity中定义webview的属性及相应的函数 WebView wv=(WebView)findViewBy
uni-app中使用web-view解决手机顶部被遮挡和输入框被软键盘遮挡
努力奔跑的小不点
07-23 4131
onLoad() { var height=0;//定义动态的高度变量，如高度为定值，可以直接写 uni.getSystemInfo({ //成功获取的回调函数，返回值为系统信息 success: (sysinfo) => { height = sysinfo.windowHeight-44;//自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种 }, complete: () => { } }); var currentWebview
解决uniapp中的web-view页面进入时全屏问题
最新发布
qwguo
05-16 593
但是在 app调试或真机上，无论如何，web-view都占满全屏，怎么调样式都没用，都无效。上边方法是用过js的方式把web-view元素动态添加到页面中，并且给他设置宽高，和间距。在h5 浏览器下显示正常，我通过样式控制，上面是web-view，下面是菜单栏。即使把 web-view的style设为display:none，也不隐藏。上面的代码打包成ios的app的时候。会占据全屏，导致其他元素无法显示。开发应用的时候，我们使用。
uniapp修改webview样式
Syracuse123_的博客
02-14 2619
uniapp修改嵌入的webview的样式，宽、高、位置等
uniapp页面使用web-view加载网络url，导致底部组件被覆盖解决办法
zhanglei892721的博客
06-30 2867
<script> var wv;//计划创建的webview export default { onReady() { var px = uni.upx2px(120) var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译.
webview 覆盖 同页面组件 问题 && 点击事件
Wickedstepmother的博客
04-28 450
【代码】webview 覆盖 同页面组件 问题 && 点击事件。
uniapp 使用webView通讯
04-04
uniapp 使用webView通讯
uniapp与webview之间的相互传值的实现
10-15
主要介绍了uniapp与webview之间的相互传值的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Android中WebView常见问题及解决方案汇总
01-20
Android WebView常见问题解决方案汇总: 就目前而言，如何应对版本的频繁更新呢，又如何灵活多变地展示我们的界面呢,这又涉及到了web app与native app之间孰优孰劣的争论. 于是乎,一种混合型的app诞生了,灵活多变的...
（uniapp框架）手动封装webview页面与App交互sdk
01-30
自己项目开发中使用的，需求是打通App和webview页面两者之间的数据交互 H5调用App的方法（反之App可以使用该页面的方法）
uniwebview内嵌网页
10-24
uniwebview2.2.1内嵌网页，手机端，
uni-app前端H5页面底部内容被tabbar遮挡
qq_44792224的博客
11-09 3078
在用uniapp写小程序的时候，底部有一部分内容没显示出来，被底部的tabbar遮挡住了。
MUI前端框架学习（一）
yan647的博客
08-07 4930
1、遮罩 方法一：用JS来写 // 创建Webview窗口带遮罩层 var wd=plus.webview.create('http://www.dcloud.io/','dcloud',{mask:'rgba(0,0,0,0.5)'}); wd.show(); // 动态修改Webview窗口的遮罩层 var ws=plus.webview.currentWebview();
uniapp中遮挡住uniapp自带的tabbar
weixin_35749796的博客
12-21 1648
在 uni-app 中要遮挡住 uni-app 自带的 tabbar，可以在页面的根节点添加一个属性 style="height: 100%; overflow: hidden;"，然后再把内容的高度设置为 height: calc(100% - 50px);，这样就可以将 tabbar 遮挡住了。 例如： <template> <view class="page" styl...
VUE(uni-app框架)开发微信小程序③-显示隐藏
qq_39075676的博客
10-18 4234
uni-app控制显示隐藏的方式有两种，【v-if】和 【v-show】
小程序web-view覆盖原生组件
細水、長流√的专栏
04-23 1850
小程序web-view覆盖原生组件 web-view 一、web-view的使用官方文档 <web-view class="map-box" src="https://www.forguo.com"> </web-view> ** 官方指出，小程序默认会覆盖其它所有的组件**二、解决需求 需要在web-view页面上面加一个按钮，用来跳转到小程序的页面， 1....
uniapp中弹出层如何遮挡住uniapp中自带的tabbar
weixin_42588555的博客
12-21 3378
在 uniapp 中，如果你想要遮挡住自带的 tabbar，你可以使用 uniapp 自带的弹出层组件来实现。 具体来说，你可以使用 uniapp 的 popup 组件来实现弹出层的效果。你可以在 popup 组件中包含你想要显示的内容，然后设置 popup 组件的 mask 属性为 true，这样就可以在弹出层中显示一个半透明的蒙层，来遮挡住底部的 tabbar。 示例代码如下： <tem...
uni-app前端H5页面底部内容被tabbar遮挡的问题解决方案
热门推荐
此行必胜，你我顶峰相见
11-11 1万+
uni-app前端H5页面底部内容被tabbar遮挡的问题解决
uniapp的webview 遮挡导航栏 怎么解决
07-27
如果在 UniApp 的 WebView 中遇到导航栏被遮挡的问题，可以尝试以下几种解决方法： 1. 调整 WebView 的位置和大小：可以通过给 WebView 的容器元素设置合适的位置和大小，以避免与导航栏重叠。可以使用 CSS 的定位属性和盒模型属性来调整容器元素的位置和大小。 2. 使用透明导航栏：如果导航栏是原生导航栏，可以尝试将导航栏设置为透明或半透明，使得 WebView 可以显示在导航栏下方。可以通过原生端的代码来实现这个效果。 3. 动态调整 WebView 高度：可以监听页面滚动事件，在滚动时动态调整 WebView 的高度，以避免被导航栏遮挡。可以通过监听页面滚动事件，并计算导航栏的高度来调整 WebView 的高度。 4. 使用插件或扩展组件：UniApp 社区中可能有一些插件或扩展组件可以解决 WebView 遮挡导航栏的问题。可以在 UniApp 的插件市场或论坛中搜索相关解决方案。 需要根据具体情况选择适合的解决方法，并进行相应的调整和实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值