TianHeJianKang/components/navBar/navBar.vue

<template>
	<view class="" :style="`paddingTop:${heights}px;`" style="width: 750rpx;">
		<view class="tab">
			<view class="">
				{{text}}
			</view>
		</view>
	</view>

</template>

<script setup>
	import { ref } from 'vue'

	const text = ref()// tab的文字内容
	const heights = ref('20')//顶部高度（以胶囊底部为准）
	// let top = ref()//胶囊顶部距离顶部高度
	// const jiaoNang = ref()//获取胶囊位置信息
	// 获取页面传来的tab内容
	const props = defineProps({
		text: {
			type: String,
		},
	})
	text.value = props.text
	// // 获取顶部胶囊位置
	// jiaoNang.value = uni.getMenuButtonBoundingClientRect()
	// // 保存胶囊底部到屏幕顶部高度
	// heights.value = jiaoNang.value.height + jiaoNang.value.top
	// // 保存胶囊顶部到屏幕顶部高度
	// top.value = jiaoNang.value.top



	const getPhoneInfo = () => {
		const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
		// let statusBarObj = {
		// 	statusBarHeight: 20
		// }
		// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
		console.log(phoneInfo,'高度信息啊')
		heights.value = phoneInfo.statusBarHeight;
	}
	getPhoneInfo()
	
</script>

<style lang="scss">
	.tab {
	
		// position: fixed;
		// top: 0;
		// left: 0;
		text-align: center;
		overflow: hidden;
		background-color: #fff;
		color: #333;
		// z-index: 10000;
		width: 750rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
</style>