IOS微信下問題1 底部導航欄導致標籤位置偏移

何時出現：

在IOS微信瀏覽器下，當瀏覽器內出現跳轉產生url歷史記錄的時候，此欄就會出現

導致的問題：

        導航欄影響高度計算，此問題很少出現。模擬問題，用戶打開一個頁面，此時沒有歷史記錄導航欄不存在。用戶進行跳轉有歷史記錄導航欄出現，在此頁面正好存在非正常佈局流元素（例position:”fixed”）針對底部定位，那ok完蛋，你在IOS偶爾就會看到元素會偏下 一個導航欄的高度。

                                      

 

圖中我們寫的導航欄使用position: “absolute”;bottom: 0定位，1圖由於此問題我們的導航欄直接被覆蓋。2圖爲正常狀態

解決方式：

1、不產生歷史記錄讓此欄不出現，由於未授權代碼無法清除會話歷史（session History），也不能禁用回退/前進功能。最快捷的可用方式是使location.replace()方法，提供指定的URL來替換當前的會話歷史（session history）。幾種常用UI框架的路由庫也都有replace的替代方法。（如果不好實現可以在第一個頁面產生歷史記錄也可以避免此問題） 解釋兩點，1用replace替代push指第一個頁面到第二個頁面push->replace,其他頁面不變 2 如何在第一個界面產生歷史記錄:可以在跳轉到第一個頁面前再加一個頁面，此頁面不需要內容直接跳轉即可。

2、在高度改變後重新定位。在底部導航欄頁面高度會改變，由此可以利用onresize監聽頁面大小變化，在高度改變後重新設置非正常佈局流元素即可解決。

function resizeHeight(e){
    let resizeTimeout;
    if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
            resizeTimeout = null;
            let navBar = document.getElementsByClassName("component-tab-bar-box")[0]; //此類即爲非正常佈局流元素  請使用你出現問題的元素
            navBar.style.position = "fixed"; //可不加
            let bottom = navBar.style.bottom;
            navBar.style.bottom = parseInt(bottom) ? 0 : 1 + 'px';
        }, 200);  //此處200ms只做參考，如還出現問題可增加時間延遲
    }
}
window.onresize = resizeHeight;