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>