uniapp支持自定义nav-bar,只要在pages.json里定义navigationStyle：custom

{
    "pages": [ //pages数组中第一项表示应用启动页
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": ""
            }
        }
    ],
    "tabBar": {
            "fontSize": "14px",
            "color": "#7A7E83",
            "selectedColor": "#1d71ff",
            "borderStyle": "black",
            "backgroundColor": "#ffffff",
            "list": [{
                "pagePath": "pages/index/index",
                "iconPath": "/static/home.png",
                "selectedIconPath": "static/homehl.png",
                "text": "%app.nav1%"
            }]
        },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#fff",
        "backgroundColor": "#F8F8F8",
        "navigationStyle": "custom"
    }
}

定义后可以使用框架自带的uni-nav-bar扩展组件，也可以完全自定义一个全局组件 只要遵守easycom默认规则

components>customNavBar>customNavBar.vue

这里只针对完全自定义后h5和小程序头部高度问题讨论，因为是完全自定义，头部还有信号电池状态栏，另外还有小程序分享和关闭按钮栏高度，因此需要通过系统api获取信息来计算与顶部的高度。之前使用的是uni.getSystemInfoSync,但微信小程序最近从基础库 2.20.1 开始，本接口停止维护，所以改为uni.getWindowInfo即可

//旧版 const SYSTEM_INFO = uni.getSystemInfoSync();
const SYSTEM_INFO = uni.getWindowInfo();

//时间电量状态栏高度
export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight;

export const getTitleBarHeight = ()=>{
	//关闭按钮胶囊
	if(uni.getMenuButtonBoundingClientRect){
		let {top,height} = uni.getMenuButtonBoundingClientRect();
		return height + (top - getStatusBarHeight())*2
	}else{
		return 0;
	}
}
export const getNavBarHeight = () => getStatusBarHeight()+getTitleBarHeight();

export const getNavBarPaddingTop = () => {
	if(uni.getMenuButtonBoundingClientRect){
		let {top,height} = uni.getMenuButtonBoundingClientRect();
		return height + (top - getStatusBarHeight())
	}else{
		return 0;
	}
}

通过获取手机系统状态栏高度信息 计算出自定义nav-bar需要与顶部的距离和状态栏statusBar需要的高度，可以这么定义

<view class="navbar" :style="{paddingTop:getNavBarPaddingTop()+'px'}">
        <view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
        <view class="app-header uni-row">
            <view class="left">
                <image src="logo.png" />
            </view>
            <view class="right"></view>
        </view>
    </view>

至此解决完全自定义nav-bar与顶部距离和自身需要高度问题