小程序自定义顶部导航栏，uni-app微信小程序自定义顶部导航栏

一个需求需要把左上角按钮，改成图标，效果如下

1、自定义顶部导航栏需要注意，具体可参考uniapp文档，查看文档

2、详细代码和配置，重点是兼容不同型号机型

2.1 page.json文件中去除原生导航栏样式 "navigationStyle": "custom"

2.2 App.vue在onShow中获取数据并存储

<script>
	export default {
		onShow: function() {
			console.log('App Show')
			uni.getSystemInfo({
			  success: (result) => {
				// 获取手机系统的状态栏高度（不同手机的状态栏高度不同）  （ 不要使用uni-app官方文档的var(--status-bar-height) 官方这个是固定的20px  不对的 ）
				// console.log('当前手机的状态栏高度',result.statusBarHeight)
				let statusBarHeight = result.statusBarHeight + 'px'
				// 获取右侧胶囊的信息 单位px
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				//bottom: 胶囊底部距离屏幕顶部的距离
				//height: 胶囊高度
				//left:   胶囊左侧距离屏幕左侧的距离
				//right:  胶囊右侧距离屏幕左侧的距离
				//top:    胶囊顶部距离屏幕顶部的距离
				//width:  胶囊宽度
				// console.log(menuButtonInfo.width, menuButtonInfo.height, menuButtonInfo.top)
				// console.log('计算胶囊右侧距离屏幕右边距离', result.screenWidth - menuButtonInfo.right)
				let menuWidth = menuButtonInfo.width + 'px'
				let menuHeight = menuButtonInfo.height + 'px'
				let menuBorderRadius = menuButtonInfo.height / 2 + 'px'
				let menuRight = result.screenWidth - menuButtonInfo.right + 'px'
				let menuTop = menuButtonInfo.top + 'px'
				let contentTop = result.statusBarHeight + 44 + 'px'
				let menuInfo = {
				  statusBarHeight: statusBarHeight,//状态栏高度----用来给自定义导航条页面的顶部导航条设计padding-top使用：目的留出系统的状态栏区域
				  menuWidth: menuWidth,//右侧的胶囊宽度--用来给自定义导航条页面的左侧胶囊设置使用
				  menuHeight: menuHeight,//右侧的胶囊高度--用来给自定义导航条页面的左侧胶囊设置使用
				  menuBorderRadius: menuBorderRadius,//一半的圆角--用来给自定义导航条页面的左侧胶囊设置使用
				  menuRight: menuRight,//右侧的胶囊距离右侧屏幕距离--用来给自定义导航条页面的左侧胶囊设置使用
				  menuTop: menuTop,//右侧的胶囊顶部距离屏幕顶部的距离--用来给自定义导航条页面的左侧胶囊设置使用
				  contentTop: contentTop,//内容区距离页面最上方的高度--用来给自定义导航条页面的内容区定位距离使用
				}
				uni.setStorageSync('menuInfo', menuInfo)
			  },
			  fail: (error) => {
				console.log(error)
			  }
			})
		},
	}
</script>

2.3 自定义顶部导航栏页面

<template>
	<view class="index-page">
        <!-- paddingTop不生效可换成marginTop -->
		<view class="tab_title" :style="{ paddingTop: statusBarHeight}">
		  <!-- 左上角自定义样式 -->
		  <view class="menu_btn flex-betwee box-sizing"
			:style="{ position: 'fixed', top: menuTop, left: menuRight, width: menuWidth, height: menuHeight, borderRadius: menuBorderRadius}">
			<image class="logo" src="/static/logo.png" @click="goStepPage"></image>
			<view class="tit">uniapp</view>
		  </view>
		</view>
		<view class="content_box box-sizing" :style="{marginTop:contentTop}">
			内容
		</view>
	</view>
</template>
<script>
	export default {
    	data() {
			return {				
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,//状态栏的高度（可以设置为顶部导航条的padding-top）
				menuWidth: uni.getStorageSync('menuInfo').menuWidth,
				menuHeight: uni.getStorageSync('menuInfo').menuHeight,
				menuBorderRadius: uni.getStorageSync('menuInfo').menuBorderRadius,
				menuRight: uni.getStorageSync('menuInfo').menuRight,
				menuTop: uni.getStorageSync('menuInfo').menuTop,
				contentTop: uni.getStorageSync('menuInfo').contentTop,
			}
		},
    }
</script>

<style lang="scss" scoped>
        .box-sizing {
	    	box-sizing: border-box;
	    }
    	.index-page {
		width: 100vw;
		height: calc(100vh - 64px); // 解决页面无内容时上下滚动问题 高度默认44px + padding-top 20px
		// padding: 32rpx;

		.tab_title {
			width: 100%;
			height: 44px !important; //这个是固定的44px（所有小程序顶部高度都是 = 44px + 手机系统状态栏高度）
			line-height: 44px;
			text-align: center;
			// background-color: #d00;
			background-color: #f8f8f8 !important;
			position: fixed;
			top: 0;
			z-index: 9999;
			color: #000;
			font-weight: 500;

			.menu_btn {
				width: 414rpx !important;
				// background-color: #ffffff; //这个是小程序默认的标题栏背景色
				overflow: hidden;

				// position: fixed; //行内式写了固定定位--目的是去掉下划页面一起滚动问题
				.arrowleft {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-160%, -50%) !important;
					-webkit-transform: translate(-160%, -50%) !important;
				}

				.text_box {
					width: 1rpx;
					height: 20px;
					background-color: #ddd;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) !important;
					-webkit-transform: translate(-50%, -50%) !important;
				}

				.home {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(60%, -50%) !important;
					-webkit-transform: translate(60%, -50%) !important;
				}
			}
		}
	}
</style>

完成，代码可直接复制使用