uniapp tabbar中间突起(没用任何组件)

 这是我的效果图(我的加号不是主页,是用的navigateTo跳转)

 

<template>
	<view class="tabbar-container" >
		<block>
			<view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
				<view class="item-top"><image :src="currentItem == item.id ? item.selectIcon : item.icon" mode="widthFix"></image></view>
				<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
					<text v-if="index!=2">{{ item.text }}</text>
				</view>
				
				
			</view>
		</block>
	</view>
</template>
 
<script>
export default {
	props: {
		currentPage: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			currentItem: null,
			tabbarList: [
				{
					id: 0,
					path: '/pages/index/index',
					icon: '/static/images/index/jia.svg',
					selectIcon: '/static/images/index/shou1.svg',
					text: '首页',
					centerItem: false
				},
				{
					id: 1,
					path: '/pages/list/list',
					icon: '/static/images/index/fang1.svg',
					selectIcon: '/static/images/index/fang2.svg',
					text: '房源',
					centerItem: false
				},
				{
					id: 2,
					path: '/pages/publish/publish',
					icon: '/static/images/index/shou2.svg',
					selectIcon: '/static/images/index/shou2.svg',
					text: '二维码',
					centerItem: true
				},
				{
					id: 3,
					path: '/pages/hall/hall',
					icon: '/static/images/index/xu1.svg',
					selectIcon: '/static/images/index/xu2.svg',
					text: '需求',
					centerItem: false
				},
				{
					id: 4,
					path: '/pages/mine/mine',
					icon: '/static/images/index/wo1.svg',
					selectIcon: '/static/images/index/wo2.svg',
					text: '我的',
					centerItem: false
				}
			]
		};
	},
	mounted() {
		this.currentItem = this.currentPage;
	},
	methods: {
		changeItem(item) {
			if(item == this.currentItem) return
			// this.currentItem = item.id;
			// uni.setStorageSync('tabbar',item.id)
			if(item.id==2){
				uni.navigateTo({
					url: item.path
				});
			}else{
				uni.switchTab({
					url: item.path
				});
			}
		}
	}
};
</script>
<style lang="scss">
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.tabbar-container {
	position: fixed;
	background-color: white;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	// box-shadow: 0 0 5px #999;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999999;
	z-index: 999;
}
.tabbar-container .tabbar-item {
	width: 20%;
	height: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.tabbar-container .item-active {
	color: #00BBD3;
}

.tabbar-container .tabbar-item .item-top {
	image{
		width: 50rpx;
		height: 50rpx;
		position: relative;
		top: 15rpx;
	}
}
.tabbar-container .center-item .item-top {
	// position: absolute;
	image{
		width: 120rpx;
		margin-top: -30rpx;
	}
}
image{
	width: 50rpx;
}
.tabbar-container .tabbar-item .item-top  {
	width: 100%;
	height: 80%;
}
.tabbar-container .tabbar-item .item-bottom {
	font-size: 26rpx;
	width: 100%;
	// text{
	// 	margin-top: 20rpx;
	// }
}
</style>

 上面为封装的tabbar组件,在main.js里面注册全局组件

import {tabbar} from './components/tabBar.vue'
Vue.component('tabbar',tabbar)

在主页面里面引入组件

<tabbar :current-page="0"></tabbar>

这是pages.json 里面tabbar的配置

"tabBar": {
		 
		"custom":true,
	    "list": [{
	        "pagePath": "pages/index/index"
	       
	    }, {
	        "pagePath": "pages/list/list"
	        
	    },
		{
		    "pagePath": "pages/hall/hall"
		},{
		    "pagePath": "pages/mine/mine"
		}
		]
	},