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=thisuni.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: "", //导航栏背景色,不传参则默认#9CFcapsuleTop: "", //胶囊顶部距离(动态获取传参)textColor: "", //导航标题字体颜色(不传默认#FFF)iconColor: "", //icon图标颜色(不传默认#FFF)blackShow: "", //是否显示返回字体及icon图标(不传默认显示true)backText: "", //默认字体(返回)
},