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

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

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

情況一：
在下圖布局下：

頭部一個(gè)固定的banner圖，下部為占滿屏幕的一個(gè)元素時(shí).開始的思路是獲取屏幕的高度減banner的高度，賦值給底部高度。此時(shí)，會(huì)出現(xiàn)帶著虛擬鍵盤進(jìn)來，再關(guā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";
            },

云服務(wù)器 GPU云服務(wù)器關(guān)于javascript的問題關(guān)于php的問題關(guān)于系統(tǒng)錯(cuò)誤的問題有關(guān)于回調(diào)的問題

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107124.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

stackvoid 2019-08-23 17:05 評論0 收藏0