uniapp自定义tabbar，中间凸起（支持H5、微信小程序）

 最近公司需要做一款app，需要中间按钮凸起，在网上找了一些，参考文献，做了一个demo；

H5效果图如下：

小程序效果图如下： 

目录结构如下：

 

page.json的配置如下：

{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "简介"
		}
	}, {
		"path": "pages/discount/discount",
		"style": {
			"navigationBarTitleText": "优惠"
		}

	}, {
		"path": "pages/code/code",
		"style": {
			"navigationBarTitleText": "二维码"
		}

	}, {
		"path": "pages/search/search",
		"style": {
			"navigationBarTitleText": "探索"
		}

	}, {
		"path": "pages/mine/mine",
		"style": {
			"navigationBarTitleText": "我的"
		}

	}],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "CRM",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"background": "#efeff4"
		}
	},
	"tabBar": {
		"color": "#999999",
		"selectedColor": "#f00",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"midButton":{
			"text":"二维码",
			"pagePath":"pages/code/code",
			"iconPath":"static/code.png",
			"selectedIconPath":"static/codeSelected.png"
		},
		"list":[
			{
				"pagePath":"pages/index/index",
				"iconPath":"static/home.png",
				"selectedIconPath":"static/homeSelected.png",
				"text":"简介"
			},
			{
				"pagePath":"pages/discount/discount",
				"iconPath":"static/gift.png",
				"selectedIconPath":"static/giftSelected.png",
				"text":"优惠"
			},
			{
				"pagePath":"pages/code/code",
				"iconPath":"static/code.png",
				"selectedIconPath":"static/codeSelected.png",
				"text":"二维码"
			},
			{
				"pagePath":"pages/search/search",
				"iconPath":"static/search.png",
				"selectedIconPath":"static/searchSelected.png",
				"text":"探索"
			},
			{
				"pagePath":"pages/mine/mine",
				"iconPath":"static/mine.png",
				"selectedIconPath":"static/mineSelected.png",
				"text":"我的"
			}
		]
	}
}

 注册全局组件tabbar在main.js文件中，配置如下：

import Vue from 'vue'
import App from './App'
import zdyTabbar from "components/zdy-tabbar.vue"

// 注册全局组件
Vue.component('zdy-tabbar', zdyTabbar)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	...App
})
app.$mount()

 zdy-tabbar.vue文件编写：

<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"></image></view>
				<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
					<text>{
   
   { item.text }}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		currentPage: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			currentItem: 0,
			tabbarList: [
				{
					id: 0,
					path: '/pages/index/index',
					icon: '/static/home.png',
					selectIcon: '/static/homeSelected.png',
					text: '简介',
					centerItem: false
				},
				{
					id: 1,
					path: '/pages/discount/discount',
					icon: '/static/gift.png',
					selectIcon: '/static/giftSelected.png',
					text: '优惠',
					centerItem: false
				},
				{
					id: 2,
					path: '/pages/code/code',
					icon: '/static/code.png',
					selectIcon: '/static/codeSelected.png',
					text: '二维码',
					centerItem: true
				},
				{
					id: 3,
					path: '/pages/search/search',
					icon: '/static/search.png',
					selectIcon: '/static/searchSelected.png',
					text: '探索',
					centerItem: false
				},
				{
					id: 4,
					path: '/pages/mine/mine',
					icon: '/static/mine.png',
					selectIcon: '/static/mineSelected.png',
					text: '我的',
					centerItem: false
				}
			]
		};
	},
	mounted() {
		this.currentItem = this.currentPage;
		uni.hideTabBar();
	},
	methods: {
		changeItem(item) {
			let _this = this;
			//_this.currentItem = item.id;
			uni.switchTab({
				url: item.path
			});
		}
	}
};
</script>
<style>
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.tabbar-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 110rpx;
	box-shadow: 0 0 5px #999;
	display: flex;
	align-items: center;
	padding: 5rpx 0;
	color: #999999;
}
.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: #f00;
}
.tabbar-container .center-item {
	display: block;
	position: relative;
}
.tabbar-container .tabbar-item .item-top {
	width: 70rpx;
	height: 70rpx;
	padding: 10rpx;
}
.tabbar-container .center-item .item-top {
	flex-shrink: 0;
	width: 100rpx;
	height: 100rpx;
	position: absolute;
	top: -50rpx;
	left: calc(50% - 50rpx);
	border-radius: 50%;
	box-shadow: 0 0 5px #999;
	background-color: #ffffff;
}
.tabbar-container .tabbar-item .item-top image {
	width: 100%;
	height: 100%;
}
.tabbar-container .tabbar-item .item-bottom {
	font-size: 28rpx;
	width: 100%;
}
.tabbar-container .center-item .item-bottom {
	position: absolute;
	bottom: 5rpx;
}
</style>

 所有的tabbar页面引入自定义tabbar：

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