关于华为虚拟操作键收起后页面高度不会刷新问题的总结

Posted 2020-12-08 10yearsmanong

情况一：
在下图布局下：

头部一个固定的banner图，下部为占满屏幕的一个元素时.开始的思路是获取屏幕的高度减banner的高度，赋值给底部高度。此时，会出现带着虚拟键盘进来，再关闭虚拟键盘，底部留白的结果；
代码如下：

setHeigh(){
                var bodyTop = document.body.offsetHeight || document.documentElement.offsetHeight;
                var bannerH = document.getElementsByClassName(‘issue_banner‘)[0].offsetHeight;

                function getStyle(obj, attr) {
                    if (obj.currentStyle) {
                        return obj.currentStyle[attr];
                    }
                    else {
                        return document.defaultView.getComputedStyle(obj, null)[attr];
                    }
                }

                var marginTop = getStyle(_this.$refs.wrap, ‘marginTop‘);
                _this.$refs.wrap.style.height = bodyTop - bannerH - marginTop.replace(/px/i, ‘‘) + ‘px‘;
                }

解决方法：结合position:absolute;属性限定底部元素的高度。bottom_box加底部定位和顶部定位给出元素高度。此时，js只需动态获取banner的高赋值给底部的top属性就好。

.bottom{
        position: absolute;
        width: 100%;
        margin-top: 0.12rem;
        background: #FFFFFF;
        overflow: hidden;
        bottom: 0;
    }

setHeight: function () {
                var _this = this;
                var bannerH = document.getElementsByClassName(‘issue_banner‘)[0].offsetHeight;
                _this.$refs.wrap.style.top = bannerH + ‘px‘;
            },