uniapp 自定义导航栏增加首页按钮，仿微信小程序操作胶囊

实现效果如图

抽成组件navbar.vue，放入分包

<template>
	<view class="header-nav-box"
		:style="{'height':Props.imgShow?'':statusBarHeight+'px','background':Props.imgShow?'':Props.bgColor||'#ffffff;'}">
		<!-- 是否使用图片背景 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':capsuleTop+'px','color':Props.textColor||''}">
			<view class="back" v-if="Props.blackShow||true" >
				<uni-icons type="back" @click="back" size="18" :color="Props.iconColor||'black'" />
				<text class="line" />
				<uni-icons type="home" @click="backToHome" size="18" :color="Props.iconColor||'black'" />
			</view>
			<view class="title">
				<block>{{title}}</block>
			</view>
		</view>
		<!-- 自定义内容插槽 -->
		<slot name="content"></slot>
	</view>
</template>
 
<script>
	export default {
		name: "HeaderNav",
		data() {
			return {
              statusBarHeight:'',
			  capsuleTop:''
			};
		},
		props: {
		    height:{
				type: String,
				default: ''
			},
			Props: {
				type: Object,
				default: () => {}
			},
			title: {
				type: String,
				default: '默认标题'
			}
		},
		mounted() {
			var _self=this
			uni.getSystemInfo({
				success: function (e) {
				let custom = uni.getMenuButtonBoundingClientRect();
				  _self.statusBarHeight = custom.bottom + custom.top - (e.statusBarHeight) + 4
				},
			})
			this.capsuleTop = getApp().globalData.capsuleTop
		},
		methods: {
			// 返回按钮回调函数
			back() {
				uni.navigateBack({
					data: 1
				})
				this.$emit('back')
			},
			backToHome(){
              this.$tab.reLaunch('/pages/index') //放入自己的首页路径
			},
		}
	}
</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: 23%;
				padding: 10rpx;
				justify-content: space-around;
                display: flex;
				border-radius: 50rpx;
				// background-color: #ff8916;
				border: 1px solid rgba(0, 0, 0, .1);
			}
 
			.title {
				width: 49%;
				text-align: center;
			}
		}
	}
	.home {
		margin-left: 10rpx;
	}
	.line {
		width: 10rpx;
		height: 36rpx;
		background-color: rgba(252, 252, 252, .7);
	}
</style>

全局引用

// 在main.js引用
// 注册全局组件
import HeaderNav from "./subPackage/navbar/index.vue" //换成你自己的组件位置
Vue.component("HeaderNav", HeaderNav)

使用

<HeaderNav title="你自己的页面路由名称"  />
// 可以传入的参数说明
Props: {
	imgShow: "", //不传参则默认隐藏状态(false),且使用默认背景色
	statusBarHeight: "", //导航高度(动态获取传参)
	bgColor: "", //导航栏背景色,不传参则默认#9CF
	capsuleTop: "", //胶囊顶部距离(动态获取传参)
	textColor: "", //导航标题字体颜色(不传默认#FFF)
	iconColor: "", //icon图标颜色(不传默认#FFF)
	blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)
	backText: "", //默认字体(返回)
},