什么是webview损合？
是一個(gè) web 瀏覽器組件，可以用來承載網(wǎng)頁的容器娘纷，會(huì)自動(dòng)鋪滿整個(gè)屏幕嫁审。用通俗的話來說，他就是一個(gè)“載體赖晶、橋梁”律适，把App與h5給結(jié)合起來， 我們通常在項(xiàng)目中一般是把h5頁面嵌套在app中使用遏插，實(shí)現(xiàn)前端的混合式開發(fā)捂贿。
產(chǎn)生問題的原因以及效果展示
上面我們說過，webview會(huì)自動(dòng)鋪滿整個(gè)屏幕胳嘲，所以這就導(dǎo)致了一些問題厂僧，比如今天，給大家所分享的 “ 遮住導(dǎo)航欄的問題 ”了牛。在我們項(xiàng)目開發(fā)過程中颜屠，導(dǎo)航欄都是由h5這邊寫的，在uniapp中不需要設(shè)置導(dǎo)航欄鹰祸，那么在pages.json中就讓 titleNView 為false了甫窟，下面給大家?guī)讖埌咐侨缦虑闆r??：
解決方案
既然webview是鋪滿整個(gè)屏幕蛙婴，那么我們就通過設(shè)置webview的height和top值來實(shí)現(xiàn)正常效果的展示粗井。代碼中所用的兩個(gè)Api: getAppWebview、getSystemInfo, 具體的屬性大家可以去文檔去看
onLoad() {
let height = 0; //定義動(dòng)態(tài)的高度變量
let statusbar = 0; // 動(dòng)態(tài)狀態(tài)欄高度
uni.getSystemInfo({ // 獲取當(dāng)前設(shè)備的具體信息
success: (sysinfo) => {
statusbar = sysinfo.statusBarHeight;
height = sysinfo.windowHeight;
}
});
let currentWebview = this.$scope.$getAppWebview(); //獲取當(dāng)前web-view
setTimeout(function() {
var wv = currentWebview.children()[0];
wv.setStyle({ //設(shè)置web-view距離頂部的距離以及自己的高度街图，單位為px
top: statusbar, //此處是距離頂部的高度浇衬，應(yīng)該是你頁面的頭部
height: height, //webview的高度
})
}, 200); //如頁面初始化調(diào)用需要寫延遲
}
通過以上方法遮住狀態(tài)欄的問題得到了解決，但隨之而來的問題又來了餐济，在安卓手機(jī)上耘擂，webview頁面又被系統(tǒng)自帶返回鍵的那一欄給遮住了，如下圖所示??：
這種情況主要是在h5中設(shè)置了底部按鈕的固定定位颤介，既然h5是沒有問題的梳星，那么問題就還是出在了webview上面，所以我們還是得在上面的代碼中滚朵，做一點(diǎn)點(diǎn)修改即可冤灾， 如下代碼所示
wv.setStyle({
top: statusbar,
height: height - statusbar, // 我們在這里把webview的高度調(diào)整一下
})
那我們最后再來看一下最終的效果，如下圖所示：
到這差不多就結(jié)束了辕近，如果大家有什么問題韵吨，歡迎下方評論區(qū)留言，小編會(huì)第一時(shí)間答復(fù)您的哦??~
