關(guān)于華為虛擬操作鍵收起后頁(yè)面高度不會(huì)刷新問(wèn)題的總結(jié)

zhangwang 發(fā)布于2019-08-26 11:33 / 2215人閱讀

摘要：情況一在下圖布局下頭部一個(gè)固定的圖，下部為占滿屏幕的一個(gè)元素時(shí)開(kāi)始的思路是獲取屏幕的高度減的高度，賦值給底部高度。加底部定位和頂部定位給出元素高度。

情況一：
在下圖布局下：

頭部一個(gè)固定的banner圖，下部為占滿屏幕的一個(gè)元素時(shí).開(kāi)始的思路是獲取屏幕的高度減banner的高度，賦值給底部高度。此時(shí)，會(huì)出現(xiàn)帶著虛擬鍵盤(pán)進(jìn)來(lái)，再關(guān)閉虛擬鍵盤(pán)，底部留白的結(jié)果；
代碼如下：

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";
                }

解決方法：結(jié)合position:absolute;屬性限定底部元素的高度。bottom_box加底部定位和頂部定位給出元素高度。此時(shí)，js只需動(dòng)態(tài)獲取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云服務(wù)器云服務(wù)器關(guān)于javascript的問(wèn)題關(guān)于php的問(wèn)題關(guān)于系統(tǒng)錯(cuò)誤的問(wèn)題有關(guān)于回調(diào)的問(wèn)題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107124.html

相關(guān)文章

關(guān)于華為虛擬操作鍵收起后頁(yè)面高度不會(huì)刷新問(wèn)題的總結(jié)

摘要：情況一在下圖布局下頭部一個(gè)固定的圖，下部為占滿屏幕的一個(gè)元素時(shí)開(kāi)始的思路是獲取屏幕的高度減的高度，賦值給底部高度。加底部定位和頂部定位給出元素高度。情況一：在下圖布局下：showImg(https://segmentfault.com/img/bV22DR?w=376&h=482); 頭部一個(gè)固定的banner圖，下部為占滿屏幕的一個(gè)元素時(shí).開(kāi)始的思路是獲取屏幕的高度減banner的...

Integ 2019-08-30 13:54 評(píng)論0 收藏0
如何用 js 獲取虛擬鍵盤(pán)高度？（適用所有平臺(tái)）

摘要：前言這是一個(gè)存在很久的歷史問(wèn)題了，對(duì)于這樣一個(gè)具有普遍性的問(wèn)題瀏覽器偏偏沒(méi)有給出解決方案，沒(méi)有方案還聊個(gè)什么別急，別急，接下來(lái)我們一起來(lái)扒一扒關(guān)于軟鍵盤(pán)高度和的問(wèn)題我們先來(lái)看一個(gè)短片認(rèn)識(shí)一下這個(gè)問(wèn)題問(wèn)題描述當(dāng)操作者進(jìn)行輸入操作的時(shí)候，彈起的前言這是一個(gè)存在很久的歷史問(wèn)題了，對(duì)于這樣一個(gè)具有普遍性的問(wèn)題瀏覽器偏偏沒(méi)有給出解決方案，what？沒(méi)有方案還聊個(gè)什么？別急，別急，接下來(lái)我們...

terro 2019-08-22 10:54 評(píng)論0 收藏0
如何用 js 獲取虛擬鍵盤(pán)高度？（適用所有平臺(tái)）

摘要：前言這是一個(gè)存在很久的歷史問(wèn)題了，對(duì)于這樣一個(gè)具有普遍性的問(wèn)題瀏覽器偏偏沒(méi)有給出解決方案，沒(méi)有方案還聊個(gè)什么別急，別急，接下來(lái)我們一起來(lái)扒一扒關(guān)于軟鍵盤(pán)高度和的問(wèn)題我們先來(lái)看一個(gè)短片認(rèn)識(shí)一下這個(gè)問(wèn)題問(wèn)題描述當(dāng)操作者進(jìn)行輸入操作的時(shí)候，彈起的前言這是一個(gè)存在很久的歷史問(wèn)題了，對(duì)于這樣一個(gè)具有普遍性的問(wèn)題瀏覽器偏偏沒(méi)有給出解決方案，what？沒(méi)有方案還聊個(gè)什么？別急，別急，接下來(lái)我們...

Forest10 2019-08-01 17:26 評(píng)論0 收藏0
如何用 js 獲取虛擬鍵盤(pán)高度？（適用所有平臺(tái)）

摘要：前言這是一個(gè)存在很久的歷史問(wèn)題了，對(duì)于這樣一個(gè)具有普遍性的問(wèn)題瀏覽器偏偏沒(méi)有給出解決方案，沒(méi)有方案還聊個(gè)什么別急，別急，接下來(lái)我們一起來(lái)扒一扒關(guān)于軟鍵盤(pán)高度和的問(wèn)題我們先來(lái)看一個(gè)短片認(rèn)識(shí)一下這個(gè)問(wèn)題問(wèn)題描述當(dāng)操作者進(jìn)行輸入操作的時(shí)候，彈起的前言這是一個(gè)存在很久的歷史問(wèn)題了，對(duì)于這樣一個(gè)具有普遍性的問(wèn)題瀏覽器偏偏沒(méi)有給出解決方案，what？沒(méi)有方案還聊個(gè)什么？別急，別急，接下來(lái)我們...

li21 2019-08-29 13:11 評(píng)論0 收藏0
可能這些是你想要的H5軟鍵盤(pán)兼容方案

摘要：然而，并沒(méi)有直接監(jiān)聽(tīng)軟鍵盤(pán)的原生事件，只能通過(guò)軟鍵盤(pán)彈起或收起，引發(fā)頁(yè)面其他方面的表現(xiàn)間接監(jiān)聽(tīng)，曲線救國(guó)。軟鍵盤(pán)收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤(pán)收起?？梢宰屲涙I盤(pán)彈起后，讓焦點(diǎn)元素再次滾到可視區(qū)，強(qiáng)迫滾到位。前言最近一段時(shí)間在做 H5 聊天項(xiàng)目，踩過(guò)其中一大坑：輸入框獲取焦點(diǎn)，軟鍵盤(pán)彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡(jiǎn)單，其實(shí)不然。從...

stackvoid 2019-08-23 17:05 評(píng)論0 收藏0