uni-app实现自定义导航栏，兼容H5、App、微信小程序_uniapp 自定义导航栏

很多情况下，系统自带的导航栏无法满足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>

四、扩展

一开始导航栏背景是透明的，是根据页面的背景图来呈现。那么滚动的时候就不是很友好了，这时候我们可以加一个滚动阈值，让导航栏变成白色背景，文字黑色。类似如下效果：