场景是用uniapp打个一个apk包,使用webview外链H5,但是出现了2个title,我的做法是隐藏apk的标题
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"navigationStyle": "custom" // 隐藏默认标题
}
}
],
隐藏之后出现一个问题,h5的标题和手机状态栏重叠了,uniapp webview的文档内容很少
在mounted中执行一下代码有用
// #ifdef APP-PLUS
const webviewList = this.$scope.$getAppWebview()
setTimeout(() => {
let webview = webviewList.children()[0]
// 设置距离顶部距离
webview.setStyle({
top: 44
})
}, 1000);
// #endif
解决
完善一下,获取设备状态栏高度,计算页面剩余高度
mounted() {
const _this = this
uni.getSystemInfo({
success: function(info) {
const statusBarHeight = info.statusBarHeight;
const h = info.windowHeight
_this.setWebviewTop(statusBarHeight, h - statusBarHeight)
}
});
},
methods: {
setWebviewTop(top, height) {
// #ifdef APP-PLUS
const webviewList = this.$scope.$getAppWebview()
setTimeout(() => {
let webview = webviewList.children()[0]
// 设置距离顶部距离
webview.setStyle({
top: top,
height
})
}, 1000);
// #endif
},
}