uniapp 自定义tabber导航栏组件_uni-app tabbar写成组件

有时我们需要给导航栏加背景图片或给导航栏加自定义图片或文字，原生的导航栏就满足不了我们的需求了

自定义导航栏组件

<template>
	<view class="zaiui-bar-title-box">
		<view class="cu-bar" :class="[bgColor]">
			<!-- 默认返回的图标 -->
			<view class="back" @tap="BackPage" v-if="isBack">
				<image src="/static/back.png" mode=""></image>
			</view>
			<!-- 当isBack为false时 自定义左边内容 -->
			<view class="left" @tap="leftTap" v-if="!isBack">
				<slot name="left"/>
			</view>
			<!-- 中间文本内容 -->
			<view class="content" @tap="contentTap">
				<slot name="content"/>
			</view>
			<!-- 右边内容 -->
			<view class="right" @tap="rightTap">
				<slot name="right"/>
			</view>
			
		</view>
		<!--占位的-->
		<view class="zaiui-seat-height" />
	</view>
</template>
 
<script>
	export default {
		name: 'bar-title',
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: Boolean,
				default: true
			},
			
		},
		methods: {
			BackPage() {
				uni.navigateBack();
			},
			leftTap() {
				this.$emit('leftTap');
			},
			contentTap() {
				this.$emit('contentTap');
			},
			rightTap() {
				this.$emit('rightTap');
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.zaiui-bar-title-box {
		.cu-bar {
			padding: 0 20rpx;
			color: #FFFFFF;
			box-sizing: border-box;
			background: url(../static/topbg.png) 0 0 no-repeat;
			background-size: cover;
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: var(--status-bar-height);
			min-height: calc(var(--status-bar-height) + 101rpx);
			.back{
				image{
					width: 18rpx;
					height: 25rpx;
				}
			}
			
			.content {
				flex: 1;
				text-align: center;
			}
		}
		
		.zaiui-seat-height {
			width: 100%;
			height: calc(var(--status-bar-height) + 101rpx);
		}
	}
</style>

我是全局注册了导航栏组件。在main.js中注册英文这个项目大部分都是用自定义组件，所有不想一个文件去单独引用

import barTitle from '@/components/bar-title.vue';
Vue.component('barTitle', barTitle);

使用导航栏

这样我们就实现了可以自定义的导航栏了

<bar-title  @rightTap="tourl('/pages/my/withdrawalList')">
    			<block slot="content">提现</block>
			<block slot="right">提现记录</block>
		</bar-title>

记得在page.json中隐藏原生的导航栏哦