uni-app自定义导航栏采坑

1.手机屏幕大小组成；

在自定义导航栏时要明白以下几个高度：
**1.**红色的为状态栏高度：（通过获取设备信息，可以获取到状态栏高度，也可以通过css变量“var(–status-bar-height)”得到状态栏高度;）

//获取设备信息（状态栏的高度）

uni.getSystemInfo({

			/*在程序刚打开时，获取设备类型计算高度,并将他们挂载到vue实例上，随时用 this.proStatusBar取值*/
				success: function(e) {
					Vue.prototype.StatusBar = e.statusBarHeight;   //状态栏的高度；
					Vue.prototype.platform = e.platform;    //客户端平台：ios、android
					
					//CustomBar 为导航栏高度+状态栏高度；一般android 导航栏为50，ios为45；
					if (e.platform == 'android') {
						Vue.prototype.CustomBar = e.statusBarHeight + 50;
					} else {
						Vue.prototype.CustomBar = e.statusBarHeight + 45;
					}
				}
			});

2.绿色的为导航栏高度；

一般android 导航栏高度为50，ios为45；

3.黑色的为tabbar高度；
4.中间的为可使用窗口高度；
手机屏幕高度=状态栏高度+导航栏高度+可使用窗口高度+tabbar高度；

2.适配iponeX;

iponeX底部无按键，需要流出安全距离；
uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置

3.app内不出现滚动条及ios回弹

"app-plus": {
					"scrollIndicator": "none",//app内不现实滚动条
					"bounce": "none" // 取消APP端iOS回弹,避免与下拉刷新冲突,以及bounce边缘1秒卡顿
				}

4.app内禁止滚动；

"style": {
				"navigationStyle": "custom",
				"disableScroll": true, // 禁止滚动, 解决scroll-view在Android小程序卡顿的问题
			}

5.图片变透明设置及自定义右侧图标，如图：

{
			"path": "pages/shop_source/houseDetail",
			"style": {
				"navigationBarTitleText": "商铺详情",
				"app-plus": {
					//app页面不显示滚动条
					"scrollIndicator": "none",
					"titleNView": {
						"type": "transparent",
						"titleColor": "#333333",
						"backgroundColor": "#FFFFFF",
						"buttons": [{
							"fontSrc": "/static/font/iconfont.ttf",
							"text": "\ue618",
							"width": "40px",
							"fontSize": "28px",
							"color": "#333333",
							"background": "rgba(0,0,0,0)"
						}]
					}
				}
			}
		}