uniapp开发微信小程序之如何自定义导航栏

业务中经常有自定义导航栏的需求，本文将实现一个和胶囊高度保持一致的导航栏。

要实现自定义导航栏，需要先修改对应page页面的navigationStyle属性。

在pages.json文件中进行修改
{
	"pages": [ 
        	{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "",
				"navigationStyle": "custom"
			}
		},]
}

整个导航栏的高度包含顶部状态栏的高度和胶囊的高度。首先先来获取顶部状态栏的高度，通过调用的getSystemInfoSync方法获取系统信息，statusBarHeight这个属性就是我们需要的状态栏高度值。

	const {statusBarHeight} = uni.getSystemInfoSync();

接着我们来获取胶囊按钮的高度，这块的实际高度除了胶囊自身的高度之外还要加上上下边距的值。我们通过调用getMenuButtonBoundingClientRect方法来获取胶囊按钮的相关数据，需要用到heght和top两个值，其中height是胶囊按钮本身的高度值，top是从屏幕顶部到胶囊顶部的距离值，所以如果要计算胶囊距离状态栏上边距值，要用距离屏幕顶部的值减去状态栏的高度，最后*2就得到上下边距值。

	     const navHeight = ref(0);
        const menu = uni.getMenuButtonBoundingClientRect();
        // 胶囊高度
	     const menuButtonHeight = menu.height
	     // 胶囊上边界的坐标
	     const menuButtonTop = menu.top
                
        // 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
        navHeight.value = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2;

以上获取到的高度值都是用px作为单位，如果要实现响应式，采用rpx做单位的话，需要进行单位换算。rpx是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。页面元素宽度在 uni-app 中的宽度计算公式：750 * 元素在设计稿中的宽度 / 设计稿基准宽度。

我们先在getSystemInfoSync方法中获取到屏幕宽度值，计算出缩放比例。将导航栏高度*比例值即可。

完整代码如下：

<template>
	<view class="nav">
		<!-- 状态栏 -->
		<view :style="'height:'+statusHeight+'rpx;'"></view>
		<!-- 导航栏 -->
		<view :style="'height:'+navHeight+'rpx;'"></view>
	</view>
</template>

<script setup>
	import {
		onBeforeMount,
		ref,
	} from 'vue';

	onBeforeMount(() => {
		getNavSize();
	})
	
	//状态栏高度
	const statusHeight = ref(0);
	//导航栏高度
	const navHeight = ref(0);
	
	//计算状态栏高度
	const getNavSize = () => {
		const {
			statusBarHeight,
			windowWidth
		} = uni.getSystemInfoSync();
		
		let scaleFactor = 750 / windowWidth;

		statusHeight.value = statusBarHeight*scaleFactor;
		
		// 胶囊按钮位置信息
		const menu = uni.getMenuButtonBoundingClientRect();
		// 胶囊高度
		const menuButtonHeight = menu.height
		// 胶囊上边界的坐标
		const menuButtonTop = menu.top
		// 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
		navHeight.value =( menuButtonHeight + (menuButtonTop - statusBarHeight) * 2)*scaleFactor;

	}
</script>

<style>
	.nav {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 2;
		border: 1px solid red;
	}
</style>