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);
            })
        },
上一篇下一篇

猜你喜欢

热点阅读