UniApp自定义底部导航栏_uniapp底部导航栏样式

1、首先在components中创建公用组件名为“personBtn”的文件

<template name='personBtn'>
	<view>
		<view class="fixed">
			<view class="fixed_menu">
				<navigator url="/pages/index/index" hover-class="none" open-type="redirectTo" :class="is_ShouYe?'c_b6a':'c_e1'">
					<view class="iconfont" :class="is_ShouYe?'c_b6a':'c_e1'">
						<image src="../static/img/fangzi.png" v-if="is_ShouYe" style="width: 48upx;height: 48upx;"></image>
						<image src="../static/img/no_fangzi.png" v-else style="width: 48upx;height: 48upx;"></image>
					</view>
					<!-- <view class="iconfont iconwocanyude" v-else :class="is_ShouYe?'c_b6a':'c_e1'"></view> -->
					<view class="btn_wz">首页</view>
				</navigator>
				<!-- <navigator url="/pages/CardTicket/CardTicket" hover-class="none" open-type="redirectTo" :class="is_message?'c_b6a':'c_e1'">
					<view class="iconfont" :class="is_message?'c_b6a':'c_e1'">
						<image src="../static/img/nav2.png" v-if="is_message"></image>
						<image src="../static/img/nav2h.png" v-else></image>
					</view>
					<view class="btn_wz">卡券</view>
				</navigator> -->
				<navigator url="/pages/my/my" hover-class="none" open-type="redirectTo" :class="is_My?'c_b6a':'c_e1'" style="position: relative;">
					<view class="iconfont" :class="is_My?'c_b6a':'c_e1'">
						<image src="../static/img/wode.png" v-if="is_My" style="width: 42upx;height: 48upx;"></image>
						<image src="../static/img/no_wode.png" v-else style="width: 42upx;height: 48upx;"></image>
						<view class="resdian" v-if="redIsShow"></view>
					</view>
					<view class="btn_wz">我的</view>
				</navigator>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		name: 'personBtn',
		props: {
			is_ShouYe: {
				type: Boolean,
				default: false
			},
			is_message:{
				type:Boolean,
				default:false
			},
			is_My:{
				type:Boolean,
				default:false
			},
			is_follow:{
				type: Boolean,
				default: false
			}
		},
		onLoad() {
			console.log(this.is_ShouYe,'>>>>>>>>>>>>>>>>>>>>')
		},
		data() {
			return {
				redIsShow:false
			};
		},
		mounted() {
			
		},
		methods: {
			
		},
	}
</script>
 
<style>
	.resdian{position: absolute;right: 0;top: 0;width: 10upx;height: 10upx;border-radius: 50%;background: red;}
	.fixed {
		position: fixed;
		height: 120rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		z-index: 111;
	}
 
	.bank {
		width: 120rpx;
		text-align: center;
		height: 120rpx;
		font-size: 20rpx;
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		line-height: 60rpx;
		background: #FF5E6C;
		overflow: hidden;
	}
 
	.fixed_menu {
		height: 120rpx;
		width: 100%;
		display: flex;
		padding: 0 190upx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		border-top: 2upx solid rgb(242,242,242);
		box-shadow: 0 0 0 0 rgb(242,242,242);
	}
	.fixed_menu image{
		display: block;
		width: 52rpx;
		height: 44rpx;
		margin: 0 auto;
	}
	/* .fixed_menu navigator {
		float: left;
		text-align: center;
	} */
 
	.bank .iconfont,
	.fixed_menu .iconfont {
		font-size: 40rpx;
		line-height: 50rpx;
		line-height: 50rpx;
		margin-top: 10rpx;
		color: #A6B1C0;
 
	}
 
	.btn_wz {
		font-size: 24rpx;
		width: 100%;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
	}
</style>

2、引用方法 
 

import personBtn from '../../components/personBtn.vue';  
 
components: {
            personBtn
        },
 
<personBtn :is_ShouYe="true"></personBtn>

3、将pages.json中的 tabBar 全部隐藏或者删除