【uni.app/微信小程序】 添加与胶囊平齐的盒子

添加与胶囊平齐的盒子

<template>
    <view class="search_box" :style="'margin-top:'+searchBarTop+'px; height:'+searchBarHeight+'px'">
        您好
    </view>
</template>
<script>
	export default {
		data() {
			return {
				searchBarTop:0,
				searchBarHeight:0,
			};
		},
		onLoad() {
            //方法文档
            // https://uniapp.dcloud.net.cn/api/ui/menuButton.html#getmenubuttonboundingclientrect
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.searchBarTop = menuButtonInfo.top;
			this.searchBarHeight = menuButtonInfo.height;
		},
	};
</script>

<style>
	
	.search_box{
		background-color: blue;
	}
</style>

getMenuButtonBoundingClientRect() | uni-app官网 (dcloud.net.cn)