Customize the navigation bar at the top of wechat applet (adaptive wechat capsule button, flex layout)

In a previously completed applet project , Encounter the height of the navigation bar at the top of wechat , There are different problems in different hand heights （ Not suitable for wechat capsule button ）. Summed up the idea of sorting out this article

problem

1. A front-end , I certainly don't want the page structure to be ugly . Customer 、 Boss 、 I'm not satisfied

resolvent

1. adopt uni.getSystemInfo Get system information （ Used to the height of mobile phone status bar ）, Because the height of the status bar is different, mobile phones are different , The status bar is as follows
   
2. adopt uni.getMenuButtonBoundingClientRect() Get the information of wechat applet capsule button （top： The coordinates of the upper boundary of the capsule button 、height： The height of the capsule button ）
3. adopt wx.getSystemInfoSync() hold px Turn into rpx, because uni.getSystemInfo and uni.getMenuButtonBoundingClientRect() The data units obtained are px

Key code

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(" Top status bar height ", that.StatusBar)
					console.log(" Navigation bar height ", that.CustomBar)
					console.log(" The upper margin of the capsule button ", that.NvaMartom)
					console.log(" Capsule button height ", that.NavHeight)
					console.log(" The top margin of the page content from the top , Full height of navigation bar ", that.Page_MagTOP)
				}
			})

The top navigation bar must be used a lot , So it needs to be packaged , Defined as a common component

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: ' Top title '
			},
			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 Method of receiving parent component ,（ How to exit the page arrow ）
this.$emit() Trigger the method on the instance , Pass the value of the public component to the parent component

call

1. Import re registration import Status_bar from '@/components/Status_bar/Status_bar.vue'
2. Use <StatusBar HeadLineTitle=' Account settings ' Statusbar_top_bgc='#f63434' Statusbar_bgc='#f63434' color='#fff' :fatherMethod='fatherMethod'></StatusBar>

design sketch

iPhone 5

iPhone XS Max