WeChat applet automatically obtains the height of the top navigation bar

1. I am a WeChat applet developed by uniapp. The original development is basically the same. First, declare variables in data

data{
    return{
        menuButtonInfo: '',
		navHeight: '',
		searchMarginTop: '',
		searchHeight: '',
		searchWidth: '',
    }
}

2. Secondly, obtain the width and height data of the navigation bar of the current mobile phone in the onLoad life cycle

onLoad: function(e) {
			this.menuButtonInfo = wx.getMenuButtonBoundingClientRect()
			const {
				top,
				width,
				height,
				right
			} = this.menuButtonInfo
			wx.getSystemInfo({
				success: (res) => {
					const {
						statusBarHeight
					} = res
					const margin = top - statusBarHeight
					this.navHeight = (height + statusBarHeight + (margin * 2)),//导航栏总高
					this.searchMarginTop = statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
					this.searchHeight = height, // 与胶囊按钮同高
					this.searchWidth = right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
				},
			})
}

3. navHeight obtains the total height of the navigation bar of the current mobile phone model; searchMarginTop obtains the height from the top of the mobile phone to the applet capsule, which is the height of the yellow line frame in the figure below; searchHeight obtains the height of the capsule, which is the figure below The height of the green wireframe; searchWidth is the width from the left side of the screen to the left side of the capsule, which is the width of the black wireframe in the figure below.

 Note: It is all thanks to Yan Huang who taught me.