uniapp封装自定义导航栏

 navBar.vue组件

<template>
	<view>
		<u-navbar :autoBack="autoBack" :class="showdow ? 'navBar' : ''">
			<view slot="left" @click="leftClick">
				<!-- <iconfont :name="leftIcon" size="48" style="padding-left: 3px"></iconfont> -->
				<iconfont name="leftss" size="42" style='padding-left: 3px;'></iconfont>
			</view>
			<view slot="center" class="navbar-title">{{ title }}</view>
			<view slot="right" @click="rightClick">
				<slot></slot>
			</view>
		</u-navbar>
		<view class="placeholder" v-if="placeholder"></view>
	</view>
</template>

<script>
	export default {
		name: "navbar",
		props: {
			// 顶部导航栏标题
			title: {
				type: String,
				default: "",
			},
			// 顶部导航栏左侧图标
			leftIcon: {
				type: String,
				default: "navbar-back",
			},
			// 顶部导航栏左侧图标
			leftss: {
				type: String,
				default: "navbar-back",
			},
			// 点击左侧区域(返回图标)，是否自动返回上一页
			autoBack: {
				type: Boolean,
				default: true,
			},
			// 底部阴影
			showdow: {
				type: Boolean,
				default: true,
			},
			// 是否使用站位元素
			placeholder: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {};
		},
		methods: {
			// 点击左侧区域
			leftClick() {
				this.$emit("leftClick");
			},
			rightClick() {
				this.$emit('rightClick');
			}
		},
	};
</script>

<style lang="scss" scoped>
	.navBar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100vw;
		height: calc(88rpx + var(--status-bar-height));
		background-color: #ffffff;
		filter: drop-shadow(0px 4rpx 8rpx rgba(117, 117, 117, 0.08));
	}

	.placeholder {
		width: 100vw;
		height: calc(88rpx + var(--status-bar-height));
		background-color: #ffffff;
	}

	.navbar-title {
		color: #191c1c;
		font-weight: 600;
		font-size: 34rpx;
	}
</style>

iconFont.vue字体图标组件

<template>
	<u-icon :name="`/static/iconfont/${name}.svg`" :size="size"></u-icon>
</template>

<script>
	export default {
		name:"iconfont",
		props:{
			// icon名称
			name: {
				type: String,
				default: () => ''
			},
			// icon大小
			size:{
				type: [String,Number],
				default: () => 48
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

</style>

页面中使用

<view class="navBar">
			<navbar :title="taskName" :autoBack="false" titleStyle="font-weight: bold;" leftIconSize="20px"
				@leftClick="backPage" />
		</view>


.navBar {
			box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.1);
		}