一、問題描述：
蘋果裝置（ios）微信中開啟h5頁面，從首頁跳轉到其他頁面後，頁面的底部會出現乙個帶有前進和後退按鈕工具欄，而該工具欄會遮擋住面底部的內容，影響頁面的正常使用。
二、原因分析：
造成該現象的原因是，當頁面跳轉時，微信瀏覽器會通過window.history讀取到瀏覽的歷史記錄，此時便會在頁面底部顯示出前進後退按鈕的工具欄，造成頁面底部內容遮擋。
三、解決方案：
了解了該問題出現的mmjfrq原因，我們也就有了解決辦法。首先想到的方案就是控制瀏覽器的歷史記錄。由於考慮到安全性問題，瀏覽器的歷史記錄不支援刪除和修改等操作，只能通過新增或替換的方式來實現對瀏覽歷史的操作，因此可以有以下方案：
（一）方案一：將頁面的路由跳轉方式更換為 「replace」 方式，原生寫法可以使用 window.location.replace() 替代 window.location.href ；vue中可以用this.$ 替代 this.$router.push()。
本以為這樣就可以解決該問題，但是經過測試發現該方案也會出現一些弊端：
為了解決第乙個問題，想到了第二個方案——監聽瀏覽器返回功能：
（二）方案二：通過history的state來監聽瀏覽器的返回事件，通過js**來模擬瀏覽器的頁面後退操作，以此來解決無法後退的問題。但是該方案由於**改動較大且頁面間的跳轉情況過於繁瑣，暫時擱置。
考慮到操作history比較繁瑣，轉而考慮是否可以通過修改樣式來實現相容：
（三）方案三：使用**查詢，手動設定兩種頁面樣式，通過判斷機型是否程式設計客棧為ios來展示不同的頁面樣式，將ios端的底部按鈕字段程式設計客棧置預留出來。 但是由於首次進入頁面時並無底部欄，且該方案需要判斷的ios機型和版本條件過多，樣式的改動也較大，暫時擱置。
進一步分析該問題發生的原因，發現出現遮擋的主要原因是，底部的工具欄是在頁面完成渲染之後才渲染的，因此才會出現覆蓋原頁面的問題，如果能讓該工具欄優先於頁面渲染，則頁面的視口高度就會是瀏覽器去掉底部工具欄之後的高度，這樣就不會出現頁面內容被遮擋的問題。想到了這一層面後我有如醍醐灌頂，終於找到可以完美解決的程式設計客棧辦法了！
（四）最終方案：在頁面載入之前通過主動新增空的歷史記錄，觸發瀏覽器的history監聽機制，讓瀏覽器先於頁面調出底部工具欄，從而解決遮擋問題。
所以我們需要在路由守衛中增加對 window.history 的處理，**如下：
router.beforeeach((to, from, next) => )
由於專案使用的是vue，這裡只展示vue中的寫法，使用其他寫法的同學可以模擬一下。
這裡之所以用replacestate 而不用 pushstate ，是因為後者會在瀏覽器中多增加一條歷史資料，這會導致在瀏覽器後退操作時需要後退兩次才可以返回到之前的頁面；而使用replacestate 則是替換瀏覽歷史中的上一條記錄，用當前頁面的位址替換上一條記錄，本質上瀏覽歷史是不變的，自此關於ios端微信的底部工具欄遮擋問題就可以完美解決了。
iOS新版微信底部返回橫條問題
頁面的高度是呼叫 window height 來獲取的，但道理來講應該沒什麼問題。第乙個反應是，要不判斷一下裝置，如果是ios則給新增乙個高度？這個想法還沒實行呢，就發現了乙個現象。第一次進來的時候是擋著的，但是重新整理一下就不擋了。然後就想著要不判斷第一次進來給個重新整理？然後落實了，改 的確沒有...
04環信聊天介面 底部工具欄布局
1.介面布局 2.演示效果 3.聊天控制器 如下 chatviewcontroller.m import chatviewcontroller.h inte ce chatviewcontroller input 輸入工具欄 底部的約束 property weak,nonatomic iboutle...
簡單實現頂部和底部工具欄
eoe.android開發者門戶 我們今天講的主要就是android 螢幕上的頂部與底部的工具欄，這樣我們就可以在乙個介面上實現很多種功能了，這樣我們的使用者用起來也比較好用，至於上面都有什麼功能，那就看大家怎麼來實現了，也不多說了，我們還是先來看看效果圖 這兩個工具欄全是用布局來實現的。底部工具欄...