美文网首页
uni-app中ios自定义webview高度,最底部部分元素被

uni-app中ios自定义webview高度,最底部部分元素被

作者: Poppy11 | 来源:发表于2023-03-21 09:43 被阅读0次

    首先我们在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);
                })
            },
    

    相关文章

      网友评论

          本文标题:uni-app中ios自定义webview高度,最底部部分元素被

          本文链接:https://www.haomeiwen.com/subject/cdqmrdtx.html