在网上查找发现，Android跟iOS在导航栏与胶囊上有差异，可以通过uni.getSystemInfoSync()来获取手动获取状态栏的高度（微信小程序对应wx.getSystemInfoSync()），测试以后发现iOS胶囊按钮与状态栏之间距离为：6px， Android为8px，由于胶囊是原生组件，必须使用px才能适配。
引用方案：
导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2
Android导航栏高度 = 32px + 8px * 2 = 48px
iOS导航栏高度 = 32px + 6px * 2 = 44px
template:
<view class="nav">
<view class="status" :style="{ height: statusHeight + 'px' }"></view>
<view class="bar":style="{ height: navHeight + 'px' }"></view>
</view>
javascript:
setNavSize: function() {
var sysinfo = uni.getSystemInfoSync(),// 这里最好调用异步 getSystemInfo
statusHeight = sysinfo.statusBarHeight,
isiOS = sysinfo.system.indexOf('iOS') > -1,
navHeight;
if (!isiOS) {
navHeight = 48;
} else {
navHeight = 44;
this.statusHeight = statusHeight;
this.navHeight = navHeight;
需要注意的是支付宝小程序自定义导航栏和微信小程序有差异，可以通过uni-app提供的条件编译解决
由此方案可以比较完美解决自定义导航栏适配问题。
问题二：原生 scroll-view 组件布局
原生的 scroll-view 组件不支持 flex 布局
导航栏小于五项时居中显示
暂无较好的办法，只能在scroll-view组件里面再加一层view实现flex布局
scroll-view + justify-content: space-around；判断总项数是否小于五，小于五动态添加class
问题三：uni-ui 组件不能修改样式
在使用抽屉组件的时候出现了样式问题，因为使用了自定义导航，所以抽屉组件占满了全屏，在其它组件修改抽屉组件的class不起作用。
方法一：在app.vue中修改class，此方法可以全局修改样式
方法二：修改组件源码，因为组件考虑的不是特别周全，可以修改组件的源码来实现自己想要的效果
方法三： /deep/ .class { } 使用 uni-app 的 css 深度选择器
问题四：修饰符失效
uni-app 虽然是vue语法，但是并没有使用vue的修饰符，而是选择小程序的修饰符
问题五：使用支付宝开发工具无法识别项目
等待支付宝小程序开发者工具启动后，在支付宝小程序开发者工具中打开：uniapp/unpackage/dist/dev/mp-alipay，然后在HBuilderX中修改文件并保存，会自动刷新支付宝小程序开发者工具
问题六：在不同平台显示不同样式
uni-app 中提供了条件编译，完美解决了这个问题
