前言

• Hbuilder X 2.7.14.20200618

假设需求

在 【uni-app】自定义导航栏/标题栏 中提到，可以全局取消原生导航栏。全局取消原生导航栏后，就需要为每个页面均添加一个自定义导航栏。

此时，可以将自定义导航栏封装成uniapp组件，并在每个页面中使用该组件。下面将该自定义导航栏封装成组件。

组件封装

1. 组件名为：imgNavBar。
2. 在项目目录/components 目录下添加imgNavBar组件。
   
3. imgNavBar.vue 代码为。

<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<image class="logo" src="/static/logo.png" mode="scaleToFill"></image>
				<view>我是导航栏标题</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82+11,
			};
		},
		props: {
			
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
	}
</script>

<style>
.navBarBox{}
.navBarBox .statusBar {}
.navBarBox .navBar {
	padding: 3rpx 50rpx;
	padding-bottom: 8rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.navBarBox .navBar .logo {
	width: 82rpx;
	height: 82rpx;
	margin-right: 10rpx;
}
</style>

组件引用

1. 在 pages/index/index 页面中引用imgNavBar组件。
2. 在 pages/index/index 页面中导入组件。

<script>
	import imgNavBar from "@/components/imgNavBar/imgNavBar.vue";
	export default {
		components: {
			imgNavBar
		},
		data() {
			return {
				...
			};
		},
		...
	}
</script>

3. 在 pages/index/index 页面中使用组件。

<template>
	<view>
		<!-- 自己封装的导航栏组件 -->
		<imgNavBar />
		<!-- 页面内容 -->
		<view>我是页面内容</view>
	</view>
</template>

4. 运行效果
   

参考

https://blog.csdn.net/qq_37902065/article/details/88662600