uni-app中ios自定义webview高度,最底部部分元素被
2023-03-21 本文已影响0人
Poppy11
首先我们在onLoad中获取系统一些手机信息,并且设置webview距屏幕顶部高度(避免遮挡状态栏),以及设置高度
为什么ios中定义Webview高度(屏幕可视高度 - 状态栏高度),webview内部的tabbar会遮挡最底部元素呢?
因为ios底部会有个安全高度,也就是距离最底部还是有个bottom,也就是ios打开app会把app顶起来一定高度,测试多个ios,发现都是34px
webview内部的tabbar一般都是fix定位,我们的底部被顶起来了34px,但是我们整体webview高度设置的又多了这34px,所以内容部分也就会被tabbar顶起来的这部分给遮挡住
所以我们设置webView高度,需要这样设置(屏幕可视高度 - 状态栏高度 - 系统底部高度)
webview内部点击Input,键盘遮挡Input,可使用uni.onWindowResize方法,当安卓打开键盘时,会触发窗口尺寸变化,并返回实时的屏幕高度,所以我们需要重新设置webview高度,即可让键盘不遮挡Input.
onLoad: function() {
let windowHeight = 0;
let statusbarHeight = 0;
let safeAreaInsetsBottom = 0;
uni.getSystemInfo({
success: (sysInfo) => {
statusbarHeight = sysInfo.statusBarHeight;
windowHeight = sysInfo.windowHeight;
safeAreaInsetsBottom = sysInfo.safeAreaInsets.bottom;
}
});
let webview = this.$scope.$getAppWebview();
setTimeout(function() {
reloadView = webview.children()[0];
reloadView.setStyle({
top: statusbarHeight,
height: windowHeight - statusbarHeight - safeAreaInsetsBottom
});
reloadView.evalJS('document.cookie ="CK_ISO_CODE=sg;domain=.thermofisher.com;path=/"');
reloadView.reload();
}, 1000);
uni.onWindowResize((res) => {
setTimeout(function() {
reloadView.setStyle({
height: res.size.windowHeight - statusbarHeight - safeAreaInsetsBottom,
})
}, 100);
})
},