TianHeJianKang/components/navBar/navBar2.vue

<template>
	<view class="" :style="`height:${heights}px;`" style="width: 750rpx;">
		<view class="tab" >
			<view class="neirong" style="width: 100%;"
				:style="`height:${heights-top}px;font-size:${(heights-top)*0.6}px;margin-top:${top}px;`">
				<image @click="fanHuiFn()" class="img" src="@/static/icon_fanhui@2x.png" mode=""></image>
				{{text}}
			</view>
		</view>
	</view>

</template>

<script lang="ts" setup>
	import { ref } from 'vue'

	let text = ref()// tab的文字内容
	let heights = ref()//顶部高度（以胶囊底部为准）
	let top = ref()//胶囊顶部距离顶部高度
	const jiaoNang = ref()//获取胶囊位置信息
	// 获取页面传来的tab内容
	const props = defineProps({
		text: {
			type: String,
		},
	})
	// 返回前一个页面
	const fanHuiFn=()=>{
		uni.navigateBack({
			delta:1
		})
	}
	text.value = props.text
	// 获取顶部胶囊位置
	jiaoNang.value = uni.getMenuButtonBoundingClientRect()
	// 保存胶囊底部到屏幕顶部高度
	heights.value = jiaoNang.value.height + jiaoNang.value.top
	// 保存胶囊顶部到屏幕顶部高度
	top.value = jiaoNang.value.top
</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;
		// background-color: #fff;
		color: #333;
		.neirong{
			position: relative;
			.img{
				position: absolute;
				top: 10rpx;
				left: 20rpx;
				width: 26rpx;
				height: 32rpx;
			}
		}
		
	}

</style>