ミニプログラムカスタムナビゲーション（Liu Haipingを含むすべての携帯電話に適しています）、iPhone8以降のモデルのボトムバーオクルージョンの問題

****

トップナビゲーションをカスタマイズする

**
備考：Androidがトップナビゲーションに残り、IOSが中心になるという現象を実現することは不可能です

1.アップルレットに付属している上部のナビゲーションを非表示にします

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

"navigationStyle": "custom"

2. LiuHaipingを含むすべての携帯電話に適応できるグローバル変数を設定します

在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」は3次判定で「false」に属するため、「&&」を使用します。2つの条件のいずれかが「false」の場合、「false」を返します。

ページリファレンス

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

1. ボックスサイズなしの下部ボタンは、padding-bottomを使用して下部ナビゲーションを自動的に開きます。34pxが最適な高さです
2. 非閉塞モデルの戻り値は-1です。

js：

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