最近需要更新 5+ app 应用 App store 版本，突然发现底部选项卡出现白条遮挡或者截断问题，且刘海屏和非刘海屏表现不一致。如图所示：
iphoneX
iphone8P
我在问答社区上查找过其他类似的白条问题，有些需要使用 viewport-fit:cover，但是我的这个项目加与不加仍然不能解决白条或遮挡问题。
希望有遇到过这个问题的能够解答一下，可以付费解决。
目前使用的底部选项卡技术为 webview 方案，代码如下。
html 代码部分：
<body>
<div class="ui-loading-view">
<div class="loading-tip" style="padding-top:200px">
<div class="normal-loading" id="loading-tip">
<div class="loading-indicator" style="margin-top: 10%;"><span class="loader-dot"></span><span class="loader-dot"></span><span class="loader-dot"></span></div>
</div>
<div class="tip">载入中...</div>
<div class="error tip">如长时间无法显示，请手动重启App</div>
</div>
</div>
<nav class="mui-bar mui-bar-tab dui-tab-bar">
</a> -->
<a class="mui-tab-item" controller="contact">
<img src="static/icon/home/contact.svg" class="on-un-active" />
<img src="static/icon/home/contact-active.svg" class="on-active" />
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item mui-active" controller="index">
<img src="static/icon/home/application.svg" class="on-un-active" />
<img src="static/icon/home/application-active.svg" class="on-active" />
<span class="mui-tab-label">应用</span>
</a>
<a class="mui-tab-item" controller="profile">
<img src="static/icon/home/my.svg" class="on-un-active" />
<img src="static/icon/home/my-active.svg" class="on-active" />
<span class="mui-tab-label">我</span>
</a>
</nav>
</body>js 代码部分：
// ...
const M = Moe.Runtime;
const engine = M.engine;
const home = M.Page.current;
const pages = [
{
id: 'index',
path: '/module/index/index',
main: true
},
{
id: 'profile',
path: '/user/page/index'
},
{
id: 'contact',
path: '/chat/contact/index'
}
];
const loading = document.querySelector('.ui-loading-view');
const showLoading = () => {
if (loading) {
loading.classList.remove('hide');
}
};
const hideLoading = () => {
if (loading) {
loading.classList.add('hide');
}
};
pages.forEach((node, index) => {
const id = 'app/home/' + node.id;
const exists = engine.webview.getWebviewById(id);
if (!exists && (index == 0 || node.preload)) {
const view = M.Page.create(node.path, id, {
top: 0,
bottom: 51
// plusrequire: 'ahead'
});
home.append(view);
if (!node.main) {
view.hide('none');
}
}
});
let active = pages[0].id;
hideLoading();
const nodes = document.querySelectorAll('.mui-tab-item');
const callback = function(e) {
const now = document.querySelector('.mui-active');
if (now) {
now.classList.remove('mui-active');
}
this.classList.add('mui-active');
const target = this.getAttribute('controller');
if (target == active) {
return false;
}
hideLoading();
const id = 'app/home/' + active;
const view = engine.webview.getWebviewById('app/home/' + target);
engine.webview.hide(id);
active = target;
if (view) {
view.show('fade-in', 100);
} else {
const page = pages.find(data => {
return data.id == target;
});
const subview = M.Page.create(page.path, 'app/home/' + target, {
top: 0,
bottom: 51
// plusrequire: 'ahead'
});
home.append(subview);
}
setTimeout(() => {
showLoading();
}, 3000);
setTimeout(() => {
hideLoading();
}, 10000);
};
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
node.addEventListener('touchstart', callback, false);
}
// ...