开发微信小程序时设置为自定义导航，在iPhone X这种有刘海屏的手机中预览会发现自定义导航与“刘海”之间的距离对比原生导航有些差异，用户体验不是很好。
这里可以使用uni.getSystemInfoSync()的mode属性获取手机型号，判断是否在iPhone X中运行，如果是，则重新设定padding-top的值即可
见下面代码：

<template>
	<view class="status-bar">
		<!-- 这里是状态栏 -->
	</view>
	<view :class="{'nav-bar':true,hasBangs:doesHaveBangs}">
		uni-app首页
	</view>
</template>

<script>
	export default{
		name:"index",
		data(){
			return {
				doesHaveBangs: false // 为true表示有刘海屏
			}
		},
		onLoad(opts){
			uni.getSystemInfo({
				success: (res)=>{
					var iphoneX= 'iPhone X';
					// 判断手机型号是不是iphone x
					if(res.model.indexOf(iphoneX) > -1){
						this.doesHaveBangs= true;
					}
					// 后面可以考虑把有刘海屏的iphone型号都添加进来进行判断
				}
			})
		}，
		...
	}
</script>

<style scoped>
	.hasBangs{
		padding-top: 45rpx;
	}
</style>