自定义微信小程序顶部导航栏（自适应微信胶囊按钮，flex布局）

在之前完成的小程序项目中，遇到微信顶部导航栏高度，在不同手高度不一样问题（不适配微信胶囊按钮）。总结了一下特发这篇文章整理思路

问题

1. 一个前端，肯定不希望页面结构不好看。客户、老板、自己不满意啊

解决方法

1. 通过uni.getSystemInfo获取系统信息（用来手机状态栏高度），因为状态栏的高度不同的手机是不一样的，状态栏如下
   
2. 通过uni.getMenuButtonBoundingClientRect()获取微信小程序胶囊按钮的信息（top：胶囊按钮上边界坐标、height：胶囊按钮的高度）
3. 通过wx.getSystemInfoSync()把px转化为rpx，因为uni.getSystemInfo和uni.getMenuButtonBoundingClientRect()获取的数据单位都是px

关键代码

uni.getSystemInfo({
    
				success: function(e) {
    
					let myStatusBar = 0
					let myCustomBar = 0
					let myNvaMartom = 0
					let myNavHeight = 0
					let custom = uni.getMenuButtonBoundingClientRect();
					myStatusBar = e.statusBarHeight;
					myNavHeight = custom.height
					myNvaMartom = custom.top - e.statusBarHeight
					myCustomBar = (myNvaMartom * 2 + custom.height) - 2
					that.StatusBar = myStatusBar * 750 / wx.getSystemInfoSync()
						.windowWidth;
					that.CustomBar = (myCustomBar * 750 / wx.getSystemInfoSync()
						.windowWidth)+12;
					that.NvaMartom = myNvaMartom * 750 / wx.getSystemInfoSync()
						.windowWidth;
					that.NavHeight = myNavHeight * 750 / wx.getSystemInfoSync()
						.windowWidth;
					that.Page_MagTOP = that.CustomBar + that.StatusBar
					console.log("顶部状态栏高度", that.StatusBar)
					console.log("导航栏高度", that.CustomBar)
					console.log("胶囊按钮上边距", that.NvaMartom)
					console.log("胶囊按钮高度", that.NavHeight)
					console.log("页面内容距离顶部的上边距,导航栏全部高度", that.Page_MagTOP)
				}
			})

顶部导航栏肯定用的多啊，所以要封装起来，定义为公共组件

components/Status_bar/Status_bar.vue

<template>
	<view class="">
		<view :style="{'height':Page_MagTOP+'rpx'}" style="width: 750rpx;"></view>
		<view class="status_bar_my " :style="{'height':StatusBar+'rpx','background-color':Statusbar_top_bgc}">
		</view>
		<view class="" style="width: 750rpx;position: fixed;z-index: 16000;" :style="{'top':StatusBar+'rpx','height':CustomBar+'rpx'}">
			<view class="page_title_ii" style="z-index: 999;" :style="{'height':CustomBar+'rpx','background-color':Statusbar_bgc,'color':color}">
				<view class="" style="
							width: 50rpx;
							" @tap="childMethod()" :style="{
    'height':NavHeight+'rpx','line-height':NavHeight+'rpx'}">
					<span class="iconfont" v-if='iSTotheArrow' style="font-size: 34rpx;font-weight: 700;" :style="{'color':color}">&#xe601;</span>
				</view>
				<text class="font-size-tile" :style="{'height':NavHeight+'rpx','line-height':NavHeight+'rpx'}" style="">{
    {
    HeadLineTitle}}</text>
				<view class="navigateBackrr"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
    
		props: {
    
			HeadLineTitle: {
    
				type: String,
				default: '顶部标题'
			},
			Statusbar_top_bgc: {
    
				type: String,
				default: '#fff'
			},
			Statusbar_bgc: {
    
				type: String,
				default: '#fff'
			},
			color: {
    
				type: String,
				default: '#000'
			},
			fatherMethod: {
    
				type: Function,
				default: null
			},
			iSTotheArrow: {
    
				type: Boolean,
				default: true
			}

		},
		data() {
    
			return {
    
				StatusBar: 0,
				CustomBar: 0,
				NvaMartom: 0,
				NavHeight: 0,
				Page_MagTOP: 0,
			}
		},
		methods: {
    
			childMethod() {
    
				if (this.fatherMethod) {
    
					this.fatherMethod()
				}
			}
		},
		mounted() {
    
			let that = this
			uni.getSystemInfo({
    
				success: function(e) {
    
					let myStatusBar = 0
					let myCustomBar = 0
					let myNvaMartom = 0
					let myNavHeight = 0
					let custom = uni.getMenuButtonBoundingClientRect();
					myStatusBar = e.statusBarHeight;
					myNavHeight = custom.height
					myNvaMartom = custom.top - e.statusBarHeight
					myCustomBar = (myNvaMartom * 2 + custom.height) - 2
					that.StatusBar = myStatusBar * 750 / wx.getSystemInfoSync()
						.windowWidth;
					that.CustomBar = (myCustomBar * 750 / wx.getSystemInfoSync()
						.windowWidth)+12;
					that.NvaMartom = myNvaMartom * 750 / wx.getSystemInfoSync()
						.windowWidth;
					that.NavHeight = myNavHeight * 750 / wx.getSystemInfoSync()
						.windowWidth;
					that.Page_MagTOP = that.CustomBar + that.StatusBar
				}
			})
			this.$emit("ZXNavigtionHeigth",that.Page_MagTOP)
			this.$emit("ZXStatusBar",that.StatusBar)
			this.$emit("ZXNavHeight",that.NavHeight)
		}
	}
</script>

<style lang="scss">
	.status_bar_my {
    
		position: fixed;
		top: 0rpx;
		height: var(--status-bar-height);
		width: 750rpx;
		z-index: 1000;
		background-color: #ffffff;
	}
=
	.page_title_ii {
    
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 36rpx;
		z-index: 999;
		padding: 0 25rpx;

		.navigateBackrr {
    
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>

iSTotheArrow接收父组件的方法方法，（退出页面箭头的方法）
this.$emit()触发实例上的方法，把公共组件的值传给父组件

调用

1. 导入再注册import Status_bar from '@/components/Status_bar/Status_bar.vue'
2. 使用<StatusBar HeadLineTitle='账户设置' Statusbar_top_bgc='#f63434' Statusbar_bgc='#f63434' color='#fff' :fatherMethod='fatherMethod'></StatusBar>

效果图

iPhone 5

iPhone XS Max