zhywpt-sp/components/nav-bar/nav-bar.vue

<template>
	<view class="nav-bar" :style="{height:navHeight+'px'}">
		<view class="title"
			:style="{paddingTop:searchMarginTop+'px',height:searchHeight+'px',lineHeight:searchHeight+'px'}">
			<block v-if="isBack && !isAlipay">
				<image :src="`/static/image/icon-back.png`" mode="aspectFill"
					:style="{height:searchHeight+'px',width:searchHeight+'px'}" class="back" @click="back"></image>
			</block>
			<text>{{title}}</text>
		</view>
	</view>
	<view class="blank" :style="{height:navHeight+'px'}"></view>
</template>

<script setup lang="ts">
	import {
		onMounted,
		ref
	} from "vue";
	
	const navHeight = ref(null)
	const searchMarginTop = ref(null)
	const searchHeight = ref(32)
	const searchWidth = ref(32)
		const isAlipay = ref(false)
	onMounted(() => {
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		const type = uni.getSystemInfoSync().uniPlatform
		isAlipay.value = type === 'mp-alipay' 
		const {
			top,
			width,
			height,
			right
		} = menuButtonInfo
		uni.getSystemInfo({
			success: (res) => {
				const {
					statusBarHeight
				} = res
				const margin = top - statusBarHeight
				navHeight.value = (height + statusBarHeight + (margin * 2)) //导航栏总高
				searchMarginTop.value = statusBarHeight + margin // 状态栏 + 胶囊按钮边距
				searchHeight.value = height // 与胶囊按钮同高
				searchWidth.value = right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
			},
		})
	})

	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		isBack: {
			type: Boolean,
			default: true
		}
	})
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped>
	.blank {
		width: 100%;
	}

	.nav-bar {
		background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);
		position: fixed;
		width: 100%;
		z-index: 999;
	
	}

	.nav-bar .title {
		text-align: center;
		width: 100%;
		font-size: 28rpx;
		font-weight: bold;
		position: relative;
	}

	.back {
		position: absolute;
		left: 10rpx;
	}
</style>