Applet custom top navigation bar, uni app wechat applet custom top navigation bar

A demand requires the button in the upper left corner , Change to Icon , The effect is as follows

1、 To customize the top navigation bar, you need to pay attention to , For details, please refer to uniapp file , To view the document

2、 Detailed code and configuration , The key point is to be compatible with different models

2.1 page.json Remove the native navigation bar style from the file  "navigationStyle": "custom"

2.2 App.vue stay onShow Get data from and store

<script>
	export default {
		onShow: function() {
			console.log('App Show')
			uni.getSystemInfo({
			  success: (result) => {
				//  Get the height of the status bar of the mobile phone system （ Different mobile phones have different status bar heights ）  （  Do not use uni-app Official document var(--status-bar-height)  Officially, this is fixed 20px   It's not right  ）
				// console.log(' Current mobile phone status bar height ',result.statusBarHeight)
				let statusBarHeight = result.statusBarHeight + 'px'
				//  Get information about the right capsule   Company px
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				//bottom:  The distance from the bottom of the capsule to the top of the screen 
				//height:  Capsule height 
				//left:    The distance from the left side of the capsule to the left side of the screen 
				//right:   The distance from the right side of the capsule to the left side of the screen 
				//top:     The distance from the top of the capsule to the top of the screen 
				//width:   Capsule width 
				// console.log(menuButtonInfo.width, menuButtonInfo.height, menuButtonInfo.top)
				// console.log(' Calculate the distance from the right side of the capsule to the right side of the screen ', 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,// Status bar height ---- Used to design the top navigation bar of the custom navigation bar page padding-top Use ： Purpose to set aside the status bar area of the system 
				  menuWidth: menuWidth,// Capsule width on the right -- It is used to set the left capsule of the customized navigation bar page 
				  menuHeight: menuHeight,// Capsule height on the right -- It is used to set the left capsule of the customized navigation bar page 
				  menuBorderRadius: menuBorderRadius,// Half fillet -- It is used to set the left capsule of the customized navigation bar page 
				  menuRight: menuRight,// The distance between the capsule on the right and the screen on the right -- It is used to set the left capsule of the customized navigation bar page 
				  menuTop: menuTop,// The distance from the top of the capsule on the right to the top of the screen -- It is used to set the left capsule of the customized navigation bar page 
				  contentTop: contentTop,// The height of the content area from the top of the page -- It is used to locate the distance of the content area of the custom navigation bar page 
				}
				uni.setStorageSync('menuInfo', menuInfo)
			  },
			  fail: (error) => {
				console.log(error)
			  }
			})
		},
	}
</script>

2.3  Customize the top navigation bar page

<template>
	<view class="index-page">
        <!-- paddingTop If it does not take effect, it can be replaced by marginTop -->
		<view class="tab_title" :style="{ paddingTop: statusBarHeight}">
		  <!--  Custom style in the upper left corner  -->
		  <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}">
			 Content 
		</view>
	</view>
</template>
<script>
	export default {
    	data() {
			return {				
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,// The height of the status bar （ Can be set as the top navigation bar 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); //  Solve the problem of scrolling up and down when the page has no content   Height default 44px + padding-top 20px
		// padding: 32rpx;

		.tab_title {
			width: 100%;
			height: 44px !important; // This is fixed 44px（ The top height of all applets is  = 44px +  Height of mobile phone system status bar ）
			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; // This is the default title bar background color of the applet 
				overflow: hidden;

				// position: fixed; // Fixed positioning is written in the inline -- The purpose is to remove the problem of scrolling down the page together 
				.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>

complete , The code can be copied directly