Mini programa de navegación personalizada (adecuado para todos los teléfonos móviles, incluido Liu Haiping), el problema de oclusión de la barra inferior del iPhone 8 y modelos superiores

**

Personaliza la navegación superior

**
Observaciones: Es imposible darse cuenta del fenómeno de Android dejado en la navegación superior y centrado en IOS

1. Ocultar la navegación superior que viene con el subprograma

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

"navigationStyle": "custom"

2. Establecer variables globales, que se pueden adaptar a todos los teléfonos móviles, incluido Liu Haiping

在app.js中添加

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

3. Agregue wxml a la página
   :

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

El CSS de la navegación superior:

	.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%;
	}

**

Problema de oclusión de la barra inferior del iPhoneX

**

Agregue 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 es el modelo de teléfono detectado por el sistema;
2. Comprueba si el primer número que aparece en el modelo ios es mayor que 8, si es mayor que 8, hay una barra en la parte inferior de navegación; (iPhone12 se detecta actualmente como problema, pero el primer número detectado es 13 en 'iPhone13', ya que La prueba no es un problema, no se han encontrado otros problemas)
3. El modelo de iPhoneX es especial y requiere un juicio especial;
4. Adicional: '0' pertenece a 'falso' en el juicio ternario, así que use '&&', si una de las dos condiciones es 'falso', devolverá 'falso';

Referencia de página

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

1. El botón inferior, sin tamaño de caja, usa padding-bottom para abrir automáticamente la navegación inferior, 34px es la mejor altura de ajuste
2. El valor de retorno de los modelos no ocluidos es -1

js:

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