app.vue中判断手机机型,设置需要留出的高度(如果不是iPhonex,则默认为空)
<script>
export default {
methods: {
getMobileInfo() {
const mobileInfo = uni.getSystemInfoSync();
let BottomBlackLineHeight = ""; //iphoneX底部一条黑线,有些页面要避开
let iphoneXArr = ["iPhone X", "iPhone 11", "iPhone 11 Pro Max"];
iphoneXArr.forEach(function(item) {
if (mobileInfo.model.search(item) !== -1) {
BottomBlackLineHeight = "30rpx";
}
});
}
},
onLaunch: function() {
// 获取手机信息
this.getMobileInfo();
}
};
</script>
在需要避开底部横线的地方,设置:style="{paddingBottom:BottomBlackLineHeight }"
因为BottomBlackLineHeight默认为空,那么非iPhoneX机型设置了此属性也无影响