自定义navBar

在components文件下创建custom-navbar.vue

<template>
	<view :style="{'height': navHeight + 'px',
	padding:`${menuTop}px 0 12px`,
	'box-sizing':'border-box',
	}" :class="from">
		<view class="c-nav-bar" :style="{
			height:contentHeight+'px',
			background: config['style']['background'],
			position:from=='ticket-order-detail'?'absolute':'fixed'
		  }">
			<view class="c-nav-back" @click="handleBack" v-if="isBack">
                //白色返回按钮
				<image v-if="config.backIconStyle=='white'" class="back-icon"
					src="@/src/static/whiteBack.png"
					mode="aspectFit"></image>
                //黑色返回按钮
				<image v-if="config.backIconStyle=='black'" class="back-icon"
					src="@/src/static/blackBack.png"
					mode="aspectFit">
				</image>
			</view>
			<view class="c-nav-title" v-if="!isSearch" :style="{
				height:contentHeight+'px',
				color:config.backIconStyle
			  }">{{ title }}</view>
			<view class="c-nav-search" v-if="isSearch" :style="{
				height:contentHeight+'px',
				width:inputWidth+'px'
			  }">
				<view class="c-nav-search-input" :style="{ background: config['style']['inputBg'] }">
					<view class="search-icon"></view>
					<input ref="inputRef" v-model="searchText" type="search" @confirm="handleSearch"
						:placeholder="config['placeholder']" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const Config = {
		'tourguide': {
			placeholder: "搜一搜导游服务关键字",
			backIconStyle: "black", // white 白色返回 black 黑色 circle 圆形返回
			style: {
				background: "#fff",
				inputBg: "#f5f5f5",
			},
		},
		"cms-detail": {
			backIconStyle: "white", // white 白色返回 black 黑色 circle 圆形返回
			style: {},
		},
		"travals-strategy": {
			backIconStyle: "white", // white 白色返回 black 黑色 circle 圆形返回
			style: {},
		},
		"route-detail": {
			backIconStyle: "black", // white 白色返回 black 黑色 circle 圆形返回
			style: {},
		},
		"tourguide-order": {
			backIconStyle: "black", // white 白色返回 black 黑色 circle 圆形返回
			style: {},
		},
		"car-home": {
			backIconStyle: "white", // white 白色返回 black 黑色 circle 圆形返回
			style: {},
		},
		"entertainment-list": {
			placeholder: "搜一搜游玩项目",
			backIconStyle: "black", // white 白色返回 black 黑色 circle 圆形返回
			style: {
				background: "#fff",
				inputBg: "#f5f5f5",
			},
		},
		"route-list": {
			placeholder: "搜一搜旅游线路",
			backIconStyle: "black", // white 白色返回 black 黑色 circle 圆形返回
			style: {
				background: "#fff",
				inputBg: "#f5f5f5",
			},
		},
		"ugc-list": {
			placeholder: "搜索攻略",
			backIconStyle: "black", // white 白色返回 black 黑色 circle 圆形返回
			style: {
				background: "transparent",
				inputBg: "#f5f5f5",
			},
		},
		'ticket-order-detail': {
			backIconStyle: "white", // white 白色返回 black 黑色 circle 圆形返回
			style: {
				background: 'transparent'
			},
		}
	};
	export default {
		props: {
			isBack: {
				type: Boolean,
				default: false,
			},
			backIcon: {
				type: String,
				default: "",
			},
			title: {
				type: String,
				default: "导航栏标题",
			},
			isSearch: {
				type: Boolean,
				default: false,
			},
			from: {
				type: String,
				default: "tourguide",
			}
		},
		data() {
			return {
				menuTop: 0,
				navHeight: 0,
				contentHeight: 0,
				inputWidth: 0,
				config: {},
				searchText: ''
			};
		},
		created() {
			this.init();
			this.config = Config[this.from]
		},
		methods: {
			init() {
				const MenuButton = uni.getMenuButtonBoundingClientRect()
				console.log(MenuButton)
				this.contentHeight = MenuButton.height
				this.navHeight = MenuButton.height + MenuButton.top + 12
				this.inputWidth = MenuButton.left - 50
				this.menuTop = MenuButton.top
			},
			handleSearch(e) {
				this.$emit("on-search", e.detail.value);
			},
			handleBack() {
				uni.navigateBack();
			},
			setInputValue(text) {
				this.searchText = text
			}
		},
	};
</script>
<style scoped lang="scss">
	.ticket-order-detail {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
	}

	.travals-strategy {
		position: absolute;
		top: 0;
	}

	.cms-detail {
		position: absolute;
		top: 0;
	}

	.c-nav-bar {
		width: 100%;
		height: 128rpx;
		position: fixed;
		z-index: 9999;

		.c-nav-title {
			border-radius: 32rpx;
			position: absolute;
			top: 0;
			left: 100rpx;
			right: 100rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 34rpx;
			font-weight: 700;
		}

		.c-nav-back {
			position: absolute;
			top: 50%;
			left: 16px;
			width: 16px;
			height: 16px;
			transform: translateY(-8px);
		}

		.back-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.c-nav-search {
			border-radius: 32rpx;
			position: absolute;
			top: 0;
			left: 40px;
			overflow: hidden;

			.c-nav-search-input {
				width: 100%;
				height: 64rpx;
				position: relative;

				input {
					width: auto;
					height: 64rpx;
					line-height: 64rpx;
					padding-left: 66rpx;
				}

				.search-icon {
					width: 30rpx;
					height: 32rpx;
					position: absolute;
					top: 50%;
					margin-top: -16rpx;
					left: 20rpx;
					background: url(https://cdn-ygj-base-dev.lishicloud.com/sopOss/202401/05/4a11710110954e7eac241486eaf4d643.png) center center no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>

引用navBar

<template>
	<view class="content">
		<navBar isBack="false" title="我的" from="cms-detail"></navBar>
    </view>
</template>
<script>
	import navBar from "@/components/custom-navbar";
    export default {
		components: {
			navBar
		},
    }
</script>