Mini program custom navigation (suitable for all mobile phones including Liu Haiping), the bottom bar occlusion problem of iPhone 8 and above models

**

Customize the top navigation

**
Remarks: It is impossible to realize the phenomenon of Android left on the top navigation and IOS centered

1. Hide the top navigation that comes with the applet

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

"navigationStyle": "custom"

2. Set global variables, which can be adapted to all mobile phones, including Liu Haiping

在app.js中添加

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

3. Add wxml to the page
   :

<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,   //此处引用公共样式
	}

The css of the top navigation:

	.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's bottom bar occlusion problem

**

Add in 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 is the phone model detected by the system;
2. Check whether the first number that appears on the ios model is greater than 8, if it is greater than 8, there is a bar at the bottom navigation; (iPhone12 is currently detected as a problem, but the first number detected is 13 in'iPhone13', since The test is no problem, other problems have not been found)
3. The iPhoneX model is special and requires special judgment;
4. Additional: '0' belongs to'false' in the ternary judgment, so use'&&'. If one of the two conditions is'false', it will return'false';

Page reference

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

1. The bottom button, without box-sizing, use padding-bottom to automatically open the bottom navigation, 34px is the best fit height
2. The return value of non-occluded models is -1

js:

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