uni-app自定义微信小程序头部导航栏

目录

一、子组件代码

1、完整子组件代码 

2、子组件配置项Props 

二、父组件引用代码 

1 、将头部导航注册成全局组件（main.js）

2、获取设备信息（App.vue）

3、页面导入自定义导航组件

（3-1）、默认配置效果图例

（3-2）、更改配置效果图例 

---

---

一、子组件代码

1、完整子组件代码 

<template>
	<view class="header-nav-box"
		:style="{'height':Props.imgShow?'':Props.statusBarHeight+'px','background':Props.imgShow?'':Props.bgColor||'#9cf'}">
		<!-- 是否使用图片背景 false -->
		<image v-if="Props.imgShow||false" :src="imgUrl||'../../static/flower.jpg'" mode="scaleToFill"
			style="width: 100%; height: 400rpx;" />
		<!-- 导航内容 -->
		<view class="nav-box-item" :style="{'top':Props.capsuleTop+'px','color':Props.textColor||'#FFF'}">
			<view class="back" v-if="Props.blackShow||true" @click="back">
				<uni-icons type="back" size="18" :color="Props.iconColor||'#FFF'" />
				<block>{{Props.backText||'返回'}}</block>
			</view>
			<view class="title">
				<block>{{title}}</block>
			</view>
		</view>
		<!-- 自定义内容插槽 -->
		<slot name="content"></slot>
	</view>
</template>

<script>
	export default {
		name: "HeaderNav",
		data() {
			return {};
		},
		props: {
			Props: {
				type: Object,
				default: () => {}
			},
			title: {
				type: String,
				default: '默认标题'
			}
		},
		methods: {
			// 返回按钮回调函数
			back() {
				uni.navigateBack({
					data: 1
				})
				this.$emit('back')
			}
		}
	}
</script>

<style lang="scss">
	.header-nav-box {
		position: relative;

		.nav-box-item {
			height: 54rpx;
			position: absolute;
			display: flex;
			align-items: center;
			font-size: 34rpx;
			width: 100%;

			.back {
				width: 25%;
				padding-left: 10rpx
			}

			.title {
				width: 49%;
				text-align: center;
			}
		}
	}
</style>

2、子组件配置项Props 

//配置项
Props:{
imgShow: "", //不传参则默认隐藏状态(false),且使用默认背景色
statusBarHeight: "", //导航高度(动态获取传参)
bgColor: "", //导航栏背景色,不传参则默认#9CF
capsuleTop: "", //胶囊顶部距离(动态获取传参)
textColor: "", //导航标题字体颜色(不传默认#FFF)
iconColor: "", //icon图标颜色(不传默认#FFF)
blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
backText: "", //默认字体(返回)
},
title:"默认标题"//导航标题内容(不传则为默认内容)

 大家可根据自身项目的业务进行更改，合理使用，参考写出与自身项目中相符合的写法。也可在配置项中增加自己的想法，或删减自己认为多余的部分，一切根据自己的想法逻辑去实现，我这个只是提供一个自己所理解的参考写法。

二、父组件引用代码 

1 、将头部导航注册成全局组件（main.js）

 组件名称可自行命名“HeaderNav”

// 注册全局组件
import HeaderNav from "@/components/HeaderNav"
Vue.component("HeaderNav", HeaderNav)

2、获取设备信息（App.vue）

<script>
	export default {
		globalData: {
			statusBarHeight: "", //导航栏高度
			capsuleTop: "", //胶囊距离顶部位置
			capsuleHeight: "", //胶囊高度
		},
		onLaunch: function() {
			let custom = uni.getMenuButtonBoundingClientRect() //获取右上角胶囊信息
			let system = uni.getSystemInfoSync() //获取设备信息
			this.globalData.statusBarHeight = system.statusBarHeight + system.safeArea.top
			this.globalData.capsuleTop = custom.top
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

3、页面导入自定义导航组件

 当前为默认导入子组件（配置项参数为进行任何更改）状态，默认使用背景色#9CF，可自行根据业务需求更改背景色或渐变背景色

<template>
	<view id="container">
		<HeaderNav :Props="Props" @black="black" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Props: {
					imgShow: "", //不传参则默认隐藏状态(false),且使用默认背景色
					statusBarHeight: "", //导航高度(动态获取传参)
					bgColor: "", //导航栏背景色,不传参则默认#9CF
					capsuleTop: "", //胶囊顶部距离(动态获取传参)
					textColor: "", //导航标题字体颜色(不传默认#FFF)
					iconColor: "", //icon图标颜色(不传默认#FFF)
					blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
					backText: "", //默认字体(返回)
				}
			}
		},
		onLoad() {
			this.Props.statusBarHeight = getApp().globalData.statusBarHeight
			this.Props.capsuleTop = getApp().globalData.capsuleTop
		},
		methods: {
			black() {
				console.log("返回上一页回调事件");
			}
		}
	}
</script>

<style lang="scss" scoped>
	#container {}
</style>

（3-1）、默认配置效果图例

（3-2）、更改配置效果图例 

使用背景图头部导航效果 ，仅配置部分参数，剩余参数配置根据需求配置，部分配置项代码如下；

<HeaderNav :title="title" :Props="Props" @black="black" />

title: "我的导航",
Props: {
	imgShow: true, //不传参则默认隐藏状态(false),且使用默认背景色
	statusBarHeight: "", //导航高度(动态获取传参)
    bgColor: "", //导航栏背景色,不传参则默认#9CF
    capsuleTop: "", //胶囊顶部距离(动态获取传参)
    textColor: "", //导航标题字体颜色(不传默认#FFF)
    iconColor: "", //icon图标颜色(不传默认#FFF)
    blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
    backText: "后退", //默认字体(返回)
}

完成上述步骤，即可得到一个简易的头部导航子组件的封装啦，大家可根据自己项目需求更改，直接copy即可使用，简单易上手。傻瓜式写法！！！各位大佬小声喷哈，哈哈哈哈。