這篇文章主要介紹了如何解決iOS新版微信底部工具欄遮擋的問題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供淮濱企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為淮濱眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

一、問題描述：

蘋果設(shè)備（iOS）微信中打開H5頁面，從首頁跳轉(zhuǎn)到其他頁面后，頁面的底部會(huì)出現(xiàn)一個(gè)帶有前進(jìn)和后退按鈕工具欄，而該工具欄會(huì)遮擋住面底部的內(nèi)容，影響頁面的正常使用。

二、原因分析：

造成該現(xiàn)象的原因是，當(dāng)頁面跳轉(zhuǎn)時(shí)，微信瀏覽器會(huì)通過window.history讀取到瀏覽的歷史記錄，此時(shí)便會(huì)在頁面底部顯示出前進(jìn)后退按鈕的工具欄，造成頁面底部內(nèi)容遮擋。

三、解決方案：

了解了該問題出現(xiàn)的原因，我們也就有了解決辦法。首先想到的方案就是控制瀏覽器的歷史記錄。由于考慮到安全性問題，瀏覽器的歷史記錄不支持刪除和修改等操作，只能通過新增或替換的方式來實(shí)現(xiàn)對瀏覽歷史的操作，因此可以有以下方案：

（一）方案一：將頁面的路由跳轉(zhuǎn)方式更換為 “replace” 方式，原生寫法可以使用 window.location.replace() 替代 window.location.href ；vue中可以用this.$router.replace() 替代 this.$router.push()。

本以為這樣就可以解決該問題，但是經(jīng)過測試發(fā)現(xiàn)該方案也會(huì)出現(xiàn)一些弊端：

• 無法使用后退功能，在其他機(jī)型（安卓機(jī)型）上后退會(huì)直接退出；

• 跳轉(zhuǎn)到某些外部頁面再后退回來，底部的工具欄還會(huì)出現(xiàn)。

為了解決第一個(gè)問題，想到了第二個(gè)方案——監(jiān)聽瀏覽器返回功能：

（二）方案二：通過history的state來監(jiān)聽瀏覽器的返回事件，通過js代碼來模擬瀏覽器的頁面后退操作，以此來解決無法后退的問題。但是該方案由于代碼改動(dòng)較大且頁面間的跳轉(zhuǎn)情況過于繁瑣，暫時(shí)擱置。

考慮到操作history比較繁瑣，轉(zhuǎn)而考慮是否可以通過修改樣式來實(shí)現(xiàn)兼容：

（三）方案三：使用媒體查詢，手動(dòng)設(shè)置兩種頁面樣式，通過判斷機(jī)型是否為iOS來展示不同的頁面樣式，將iOS端的底部按鈕欄位置預(yù)留出來。 但是由于首次進(jìn)入頁面時(shí)并無底部欄，且該方案需要判斷的iOS機(jī)型和版本條件過多，樣式的改動(dòng)也較大，暫時(shí)擱置。

進(jìn)一步分析該問題發(fā)生的原因，發(fā)現(xiàn)出現(xiàn)遮擋的主要原因是，底部的工具欄是在頁面完成渲染之后才渲染的，因此才會(huì)出現(xiàn)覆蓋原頁面的問題，如果能讓該工具欄優(yōu)先于頁面渲染，則頁面的視口高度就會(huì)是瀏覽器去掉底部工具欄之后的高度，這樣就不會(huì)出現(xiàn)頁面內(nèi)容被遮擋的問題。想到了這一層面后我有如醍醐灌頂，終于找到可以完美解決的辦法了！

（四）最終方案：在頁面加載之前通過主動(dòng)添加空的歷史記錄，觸發(fā)瀏覽器的history監(jiān)聽機(jī)制，讓瀏覽器先于頁面調(diào)出底部工具欄，從而解決遮擋問題。

所以我們需要在路由守衛(wèi)中增加對 window.history 的處理，代碼如下：

router.beforeEach((to, from, next) => {
 window.history.replaceState(null, null, window.localtion.href);
 next();
})

由于項(xiàng)目使用的是vue，這里只展示vue中的寫法，使用其他寫法的同學(xué)可以類比一下。

這里之所以用replaceState 而不用 pushState ，是因?yàn)楹笳邥?huì)在瀏覽器中多增加一條歷史數(shù)據(jù)，這會(huì)導(dǎo)致在瀏覽器后退操作時(shí)需要后退兩次才可以返回到之前的頁面；而使用replaceState 則是替換瀏覽歷史中的上一條記錄，用當(dāng)前頁面的地址替換上一條記錄，本質(zhì)上瀏覽歷史是不變的，自此關(guān)于iOS端微信的底部工具欄遮擋問題就可以完美解決了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決iOS新版微信底部工具欄遮擋的問題”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

新聞標(biāo)題：如何解決iOS新版微信底部工具欄遮擋的問題
新聞來源：http://sd-ha.com/article16/popegg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、云服務(wù)器、手機(jī)網(wǎng)站建設(shè)、企業(yè)建站、品牌網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)