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

zhangwang 发布于2019-08-26 11:33 / 2109人阅读

摘要：情况一在下图布局下头部一个固定的图，下部为占满屏幕的一个元素时开始的思路是获取屏幕的高度减的高度，赋值给底部高度。加底部定位和顶部定位给出元素高度。

情况一：
在下图布局下：

头部一个固定的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";
            },

云服务器 GPU云服务器关于javascript的问题关于php的问题关于系统错误的问题有关于回调的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107124.html

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

摘要：情况一在下图布局下头部一个固定的图，下部为占满屏幕的一个元素时开始的思路是获取屏幕的高度减的高度，赋值给底部高度。加底部定位和顶部定位给出元素高度。情况一：在下图布局下：showImg(https://segmentfault.com/img/bV22DR?w=376&h=482); 头部一个固定的banner图，下部为占满屏幕的一个元素时.开始的思路是获取屏幕的高度减banner的...

Integ 2019-08-30 13:54 评论0 收藏0
如何用 js 获取虚拟键盘高度？（适用所有平台）

摘要：前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，没有方案还聊个什么别急，别急，接下来我们一起来扒一扒关于软键盘高度和的问题我们先来看一个短片认识一下这个问题问题描述当操作者进行输入操作的时候，弹起的前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？别急，别急，接下来我们...

terro 2019-08-22 10:54 评论0 收藏0
如何用 js 获取虚拟键盘高度？（适用所有平台）

摘要：前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，没有方案还聊个什么别急，别急，接下来我们一起来扒一扒关于软键盘高度和的问题我们先来看一个短片认识一下这个问题问题描述当操作者进行输入操作的时候，弹起的前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？别急，别急，接下来我们...

Forest10 2019-08-01 17:26 评论0 收藏0
如何用 js 获取虚拟键盘高度？（适用所有平台）

摘要：前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，没有方案还聊个什么别急，别急，接下来我们一起来扒一扒关于软键盘高度和的问题我们先来看一个短片认识一下这个问题问题描述当操作者进行输入操作的时候，弹起的前言这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？别急，别急，接下来我们...

li21 2019-08-29 13:11 评论0 收藏0
可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

stackvoid 2019-08-23 17:05 评论0 收藏0