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

<template>
	<view class="nav-bar" :class="scrollTop>navHeight?navbgClass:''" :style="{height:navHeight+'px',color:fontColor}">
		<view class="title"
			:style="{paddingTop:searchMarginTop+'px',height:searchHeight+'px',lineHeight:searchHeight+'px'}">
			<block v-if="isBack && !isAlipay">
				<image :src="`/static/image/icon-back-white.png`" :style="{height:searchHeight+'px',width:searchHeight+'px'}"
					class="back" @click="back(title,type,userType,orderId)"></image>
			</block>
			<text>{{title}}</text>
		</view>
	</view>
	<view class="blank" :style="{height:navHeight+'px'}"></view>
</template>

<script setup lang="ts">
	import { msg } from "@/utils/utils";
	import {
		onMounted,
		ref
	} from "vue";
	const navHeight = ref(0)
	const searchMarginTop = ref(0)
	const searchHeight = ref(0)
	const searchWidth = ref(0)
	const isAlipay = ref(false)
	onMounted(() => {
		const type = uni.getSystemInfoSync().uniPlatform
		isAlipay.value = type === 'mp-alipay'

		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		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: ''
		},
		orderId: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: ''
		},
		userType: {
			type: String,
			default: ''
		},
		isBack: {
			type: Boolean,
			default: true
		},
		scrollTop: {
			type: Number,
			default: 0
		},
		navbgClass: {
			type: String,
			default: 'nav-bg'
		},
		fontColor: {
			type: String,
			default: '#000'
		},
	})
	const back = () => {
			uni.navigateBack({
				delta: 1
			})
	}
</script>

<style scoped>
	.nav-bg {
		background: #01243A;
	}
	.nav-bgXin {
		background: #01243A;
		color:#fff;
	}
	.blank {
		width: 100%;
		display: none;
	}

	.nav-bar {
		position: fixed;
		width: 100%;
		z-index: 999;

	}

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

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