[绍棠] uni-app打包APP如何让<web-view>腾出statusBar高度
作者:互联网
问题
<web-view>
如果设了"navigationStyle" : "custom"
会自动充满全部屏幕,现在,如果想在页面上面腾出statusBar高度,该怎么做?
不可行方案
CSS方案全部不可行。
可行方案一
<template>
<view class="container">
<web-view :src="href"></web-view>
</view>
</template>
onLoad() {
var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
setTimeout(function() {
var wv = currentWebview.children()[0];
wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度,单位为px
top: plus.navigator.getStatusbarHeight(), //此处是距离顶部的高度,应该是你页面的头部
height: uni.getSystemInfoSync().windowHeight - plus.navigator.getStatusbarHeight(), //webview的高度
scalable: false //webview的页面是否可以缩放,双指放大缩小
})
}, 1000); //如页面初始化调用需要写延迟
},
可行方案二
-
不要使用
<web-view>
标签,而是使用JS编程方式。 -
必须使用APP-PLUS。
<template>
<view>
</view>
</template>
script:
export default {
onl oad() {
// #ifdef APP-PLUS
var wv = plus.webview.create("http://xxx", "custom-webview", {
plusrequire: "none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止
'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突
top: uni.getSystemInfoSync().statusBarHeight ,//放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
height: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight
})
var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
currentWebview.append(wv); //一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭
// #endif
}
}
标签:web,绍棠,statusBar,currentWebview,wv,plus,uni,webview,页面 来源: https://blog.csdn.net/happyshaotang2/article/details/114309319