问题图：
解决方法：
// app.js
App({
isIphoneX() {
let isIphoneX = false
wx.getSystemInfo({
success: function(res) {
isIphoneX = (res.model.indexOf('iPhone X') !== -1)
}
})
return isIphoneX
}
})
// tab-bar.js, 需要适配的页面
const app = getApp()
Page({
data: {
isIphoneX: app.isIphoneX()
}
})
// tab-bar.wxml
<view class="tab-bar {{isIphoneX ? 'iphonex-tab-bar' : '' }}"></view>
// tab-bar.wxss
.tab-bar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #FFF;
box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .1);
}
.iphonex-tab-bar {
content: ' ';
position: fixed;
bottom: 0;
width: 100%;
height: 68rpx;
background: #FFF;
}
效果图：