TianHeJianKang/components/navBar/navBar1.vue

<template>
	<view class="" :style="`paddingTop:${heights}px;height:${90}px`" style="width: 750rpx;background: #fff;">
		<view class="tab" style="top: 0;" :style="`height:${heights}px;`">
			
		</view>
		<view class="tab" :style="`top:${heights}px;`">
			<view class="" style="width: 60rpx;" @click="fanHuiFn">
				<uni-icons type="back" size="50rpx"></uni-icons>
			</view>
				<view class="" style="flex: 1;padding-right: 60rpx;">
					{{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()
	// 返回前一个页面
	const fanHuiFn=()=>{
		uni.navigateBack({
			delta:1
		})
	}
	
</script>

<style lang="scss">
	.tab {
	display: flex;
		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>