uniapp适应小程序和H5的搜索导航栏

<template>
	<view class="navbar">
		<view class="navbar-fixed">
			<!-- 状态栏 -->
			<view  :style="{height:statusBarHeight+'px'}">
			</view>
			<!-- 导航栏内容 -->
			<view class="navbar-content" :style="{height: navBarHeight+'px',width:windowWidth+'px'}">
				<view class="navbar-search">
					<view class="navbar-search_icon">
						<!-- <uni-icons type="back" size="22" color="#fff"></uni-icons> -->
					</view>
					<view class="navbar-search_text">
						uni-app vue
					</view>
				</view>
			</view>
		</view>

		<view style="height: 45px;">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				windowWidth: 375,
				navBarHeight: 45
			}
		},
		created() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			
			// #ifndef APP-PLUS||H5||MP-ALIPAY
				// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo);
			// (胶囊底部高度 - 状态栏高度) + (胶囊顶部高度 - 状态栏的高度) = 导航栏的高度
			this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		
		}
	}
</script>

<style lang="scss">
	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			background: $mk-base-color;

			.navbar-content {

				height: 45px;
				padding: 0 10px;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;

				.navbar-search {
					background: #fff;
					display: flex;
					align-items: center;
					padding: 0 10px;
					height: 30px;
					border-radius: 30px;
					width: 100%;
					box-sizing: border-box;
				}
			}

		}


	}
</style>