解决小程序头部与状态栏、小程序胶囊重叠问题

一、获取设备信息

uni.getSystemInfo()
获取 statusBarHeight（状态栏高度），给头部占位元素设置高度

const statusBarHeight = 
uni.getSystemInfo({
	success: function (res) {
		let statusBarHeight = res.statusBarHeight
		// 代码...
	}
});

二、获取小程序胶囊信息

uni.getMenuButtonBoundingClientRect()

// #ifdef MP-WEIXIN
	let btnInfo = uni.getMenuButtonBoundingClientRect()
	console.log(111111,menuButtonInfo)
	statusBarHeight.value = menuButtonInfo.top * 2
	inputHeight.value = menuButtonInfo.height * 2
	rightMG.value = menuButtonInfo.width * 2
// #endif

完整代码

<template>
	<view class="nav_bar_box">
		<view :style="{height: statusBarHeight + 'rpx'}"></view> //占位元素
		<view @click="goSearch" class="nav_bar_content" :style="{height: inputHeight + 'rpx',marginRight: rightMG + 'rpx'}">
			<uni-icons type="search" size="18"></uni-icons>
			请输入搜索内容
		</view>
	</view>
	<view :style="{height: statusBarHeight + inputHeight + 20 + 'rpx'}"></view> //占位元素
</template>
<script>
	import { ref } from "vue"
	export default { 
		setup(){ 
			// 设置高度 不与状态栏重叠
			let statusBarHeight = ref(20)
			let inputHeight = ref(60)
			let rightMG = ref(0)
			uni.getSystemInfo({
				success: function (res) {
					res.statusBarHeight && (statusBarHeight.value = res.statusBarHeight * 2)
					// #ifdef MP-WEIXIN
						let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
						console.log(111111,menuButtonInfo)
						statusBarHeight.value = menuButtonInfo.top * 2
						inputHeight.value = menuButtonInfo.height * 2
						rightMG.value = menuButtonInfo.width * 2
					// #endif
				}
			});
			
			return {
				statusBarHeight,
				inputHeight,
				rightMG,
			}
		}
	}
</script>