很多情况下，系统自带的导航栏无法满足UI设计的要求，这时候就需要我们自定义导航栏来实现需求，要考虑跨端的多种情况，这里我们封装成一个组件来使用，实现效果如下：
一、H5、App、微信小程序的区别
1.H5：导航栏高度可以设为44px，它没有状态栏，因为H5端运行在浏览器中，浏览器已经处理了安全区；
总高度 = 44px
2.App：导航栏高度也是44px，它的状态栏高度是不一定的，每个机型的安全区是不一样尺寸，所以获取安全区高度来计算。
总高度 = 安全区高度 + 44px
3.微信小程序：导航栏高度和状态栏高度都与机型的尺寸有关，其中状态栏高度需要获取安全区高度来计算，导航栏高度需要获取小程序右上角的“胶囊”高度和top值来计算。
总高度 = 安全区高度 + 导航栏高度
导航栏高度 = 胶囊高度 + 上间距 + 下间距
上间距 = 下间距 = 胶囊.top - 状态栏高度
即：总高度 = 状态栏高度 + （胶囊高度 + （胶囊.top - 状态栏高度）*2）
二、在components中创建一个组件名称为 navbar，先展示组件完整代码
<template> <view class="navbar"> <view class="fixed-content"> <!-- 状态栏高度 --> <view :style="{'height': geStatusBarHeight + 'px'}"></view> <!-- 导航栏高度 --> <view class="bar-content" :style="{'height': getNavBarHeight()+'px'}"> <slot> <image @tap="navigateBack()" class="nav-left" src="/static/img/common/arrow-left.png" mode=""></image> <view class="nav-title">{{ title }}</view> </slot> </view> </view> <!-- 占位高度，状态栏高度+导航栏高度，父组件就不需要计算导航栏高度 --> <view :style="{'height': geStatusBarHeight + getNavBarHeight() + 'px'}"></view> </view></template><script> export default { name:'Navbar', props:{ title:{ type: String, default:'' } }, methods: { // 获取状态栏高度 geStatusBarHeight(){ return uni.getSystemInfoSync()['statusBarHeight'] }, // 获取导航栏高度 getNavBarHeight(){ // #ifdef MP-WEIXIN let menuButtonInfo = uni.getMenuButtonBoundingClientRect() // 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调 （menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距） let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 + 2 // #endif // #ifdef APP-PLUS || H5 let navbarHeight = 44 // #endif return navbarHeight }, navigateBack(){ uni.navigateBack() } } }</script><style lang="scss" scoped> .navbar{ .fixed-content { position: fixed; top: 0; left: 0; width: 100%; padding: 0 24rpx; z-index: 1996; .bar-content{ display: flex; align-items: center; position: relative; .nav-left{ width: 22px; height:22px; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); } .nav-title{ color: #fff; font-weight: bold; font-size: 16px; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); text-align: center; } } } }</style>三、在页面中使用组件
1.直接使用默认样式，将和系统导航栏一致。
<navbar></navbar>2.slot 替换默认的样式。
<navbar> <!-- slot 替换默认的样式 --> <view class="status-bar-box"> <view class="select-city"> <image src="/static/img/index/icon-city.png"></image> <view class="">杭州市</view> </view> <view class="status-bar-title">汽车租赁</view> </view></navbar>四、扩展
一开始导航栏背景是透明的，是根据页面的背景图来呈现。那么滚动的时候就不是很友好了，这时候我们可以加一个滚动阈值，让导航栏变成白色背景，文字黑色。类似如下效果：
