v3 自定义导航头部

<template>
	<view class="">
		<view :class="isfixed?'customizeHead_fixed':'customizeHead_no'">
			<view class="" :style="{width:'100%',height:wxinfo.top + 'px',background:transparent?'transparent':'#fff'}">

			</view>
			<view class="customizeHead flex jsb ac"
				:style="{height:wxinfo.height+'px',background:transparent?'transparent':'#fff'}">

				<!-- 左侧的按钮 -->
				<view class="search flex jc ac" v-if="functionality=='search'" @click="go(Url)">
					<image class="searchimg" src="../../static/search.png" mode="aspectFit"></image>
				</view>
				<view class="setupimg" v-if="functionality=='setup'" @click="go(Url)">
					<image class="setupimgs" src="../../static/setUp.png" mode="aspectFit"></image>
				</view>
				<view class="setupimg" v-if="functionality=='goback'" @click="goback(Url)">
					<image class="setupimgs" src="../../static/arrowLeft.png" mode="aspectFit"></image>
				</view>

				<view class="customizeHeadtt w100h100 flex jc ac" v-if="!is_user">
					{{titleT}}
				</view>

				<view class="customizeHeadtt_avatar_name flex ac w100h100" v-if="is_user">
					<image class="customizeHeadtt_avatar_name_avatar" src="../../static/img.png" mode=""></image>
					<view class="customizeHeadtt_avatar_tt me-text-beyond-multi1">
						{{titleT}}
					</view>
				</view>

			</view>
		</view>
		<view class="" :style="{width:'100%',height:wxinfo.top + wxinfo.height +5  + 'px'}" v-if="isfixed">

		</view>
	</view>

</template>

<script setup>
	import {
		computed
	} from "vue"
	import tools from "@/tools/index.js"

     //tools.$public.public.wxCapsuleInfo() 等于 uni.getMenuButtonBoundingClientRect() 
     //返回的是小程序胶囊的信息，以上是我封装的
	const wxinfo = computed(() => tools.$public.public.wxCapsuleInfo())
	defineProps({
		//右边标题
		titleT: {
			default: '',
			type: String
		},
		//入口
		functionality: {
			default: 'search',
			type: String
		},
		//入口的跳转路径
		Url: {
			default: '',
			type: String
		},
		//是否固定在顶部生成一个块防止塌陷
		isfixed: {
			type: Boolean,
			default: true
		},
		//是否是透明的
		transparent: {
			type: Boolean,
			default: false
		},
		//头像和昵称
		is_user: {
			type: Boolean,
			default: false
		}

	})

	const goback = () => {
		let curPage = getCurrentPages();
		if (curPage.length == 1) {
			uni.reLaunch({
				url: "/pages/Index/Index"
			})
		} else {
			uni.navigateBack()
		}
	}

	const go = (page) => {
		if (page == '') {
			return
		}
		console.log(page);
		// if (page == '/pagesA/install/install') {
		// 	uni.reLaunch({
		// 		url: page
		// 	})
		// 	return
		// }
		uni.navigateTo({
			url: page
		})
	}
</script>

<style lang="scss" scoped>
	.customizeHead_fixed {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999999;

	}

	.customizeHead_no {
		width: 100%;

	}

	.customizeHead {
		padding: 0 0px 5px 0px;
		// box-sizing: border-box;
		background: #fff;
		position: relative;



		.customizeHeadtt {
			width: 100%;
			text-align: center;
			// font-weight: bold;
			font-size: 18px;
			color: #1F2937;
		}

		.customizeHeadtt_avatar_name {
			padding-left: 120rpx;
			box-sizing: border-box;
			width: 100%;
			font-size: 28rpx;
			color: #333333;

			.customizeHeadtt_avatar_name_avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 999%;
				margin-right: 20rpx;
			}

			.customizeHeadtt_avatar_tt {
				width: 300rpx;
			}
		}

		.search {
			width: 30px;
			height: 30px;
			background: #F3F4F6;
			border-radius: 9999px 9999px 9999px 9999px;
			position: absolute;
			left: 15px;
			// padding: 10px;
			// box-sizing: border-box;
		}

		.searchimg {
			width: 15px;
			height: 15px;

			// margin-right: 10px;
		}

		.setupimg {
			width: 20px;
			height: 20px;
			position: absolute;
			left: 15px;

			.setupimgs {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>

父组件使用

		<customizeHead :isfixed="false" :titleT="'广场'" :functionality="''" :transparent="false"></customizeHead>