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)"}]}}}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！