小程序 自定义导航（适配所有手机包括刘海屏），iPhone8以上机型的底部横条遮挡问题

**

自定义顶部导航

**
备注：无法实现顶部导航的安卓靠左，IOS居中的现象

1. 隐藏小程序自带的顶部导航

在页面的json或app.json中添加（隐藏顶部导航）： 

"navigationStyle": "custom"

2. 设置全局变量，可适配所有的手机，包括刘海屏

在app.js中添加

//全局变量
globalData: {
    
    
     statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']  //顶部导航适配
 },

3. 页面中添加
   wxml中：

<view class="custom flex_between" style="padding-top:{
    
    {statusBarHeight}}px">
	  <text>demo</text>
</view>
<view class="empty_custom" style="padding-top:{
    
    {statusBarHeight}}px"></view>

js:

	const App = getApp()
	data:{
    
    
		statusBarHeight: App.globalData.statusBarHeight,   //此处引用公共样式
	}

顶部导航的css:

	.custom{
    
    
	  position: fixed;
	  width: 100%;
	  top: 0;
	  left: 0;
	  height: 45px;
	  background: #fff;
	  z-index: 999;
	  border-bottom: 2rpx solid #eee;
	}
	.custom text{
    
    
	  color: #333;
	  font-size: 34rpx;
	  font-weight: 700;
	  max-width: 280rpx;
	}
	.empty_custom{
    
    
	  height: 45px;
	  width: 100%;
	}

**

iPhoneX的底部横条遮挡问题

**

在app.js中添加

//全局变量 
globalData: {
    
    
	isIphoneX: (wx.getSystemInfoSync().model.indexOf("iPhone") == 0) && (wx.getSystemInfoSync().model.indexOf("X") >= 0 || (wx.getSystemInfoSync().model.match(/\d+/g) && wx.getSystemInfoSync().model.match(/\d+/g)[0] > 8)) ? '0' : '-1'
},

1. wx.getSystemInfoSync().model是系统检测的手机型号；
2. 检测ios机型出现的第一个数字是否大于8，若大于8，则为底部导航有横条；（iPhone12目前检测有问题，但是检测到的第一个数字为‘iPhone13’中的13，自测是没有问题的，其他问题尚未发现）
3. iPhoneX型号特殊，需特殊判断；
4. 附加：‘0’在三元判断中属于‘false’,所以用‘&&’，如果二个条件中有一个为‘false’,则返回‘false’；

页面引用

<view class="footer" style="padding-bottom:{
    
    {isIphoneX >= 0 ? 68 : 0}}rpx;"></view>

1. 底部按钮，不加box-sizing，用padding-bottom将底部导航自动撑开，34px为最佳适配高度
2. 非遮挡机型的返回值为-1

js:

	const App = getApp()
	data:{
    
    
		isIphoneX: App.globalData.isIphoneX,
	}