uniapp实现底部凸起的tabbar

效果图：

 步骤：

1.pages.json中设置隐藏自带tabbar 

    "tabBar": {
        // 开启自定义tabBar  不填每次原来的tabbar在重新加载时都回闪现
        "custom": true,
        "color": "#B6C3D2",
        "selectedColor": "#2B2E3D",
        "borderStyle": "black",
        "backgroundColor": "#FFFFFF",
        "list": [
            {
                "pagePath": "pages/index/index",
                "iconPath": "/static/home.png",
                "selectedIconPath": "/static/home_act.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/detail/detail",
                "iconPath": "/static/home.png",
                "selectedIconPath": "/static/home_act.png",
                "text": "扫一扫"
            },
            {
                "pagePath": "pages/my/my",
                "iconPath": "/static/my.png",
                "selectedIconPath": "/static/my.png",
                "text": "我的"
            }
        ]
    },

2.在components中新建自定义组件tabbar.vue 

<template>
	<view class="tabbar-container">
		<block>
			<view class="tabbar-item" v-for="(item, index) in tabbarList" :key="index"
				: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/home_act.png",
					text: "首页",
					centerItem: false
				}, {
					id: 1,
					path: "",
					icon: "",
					selectIcon: '',
					centerItem: true
				}, {
					id: 2,
					path: "/pages/my/my",
					icon: "/static/my.png",
					selectIcon: "/static/my_act.png",
					text: "我的",
					centerItem: false
				}
			]

		};
	},
	mounted() {
		this.currentItem = this.currentPage;
		uni.hideTabBar();
	},
	methods: {
		changeItem(item) {
			if (item.id == 1) {
				uni.scanCode({
					success: (res) => {
						console.log('扫码成功', res)
					},
					fail: (err) => {
						console.log('扫码失败', err)
					},
					complete: () => {
						console.log('扫码结束')
					}
				})
			} else {
				let _this = this;
				//_this.currentItem = item.id;  
				uni.switchTab({
					url: item.path
				});
				console.log(item.path)
			}
		}
	}
}  
</script>  
<style>
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.tabbar-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150rpx;
	/* box-shadow: 0 0 5px #999;  */
	box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
	border-top: 1px;
	display: flex;
	align-items: center;
	/* padding: 5rpx 0; */
	color: #999999;
	z-index: 200;
	background-color: rgb(255, 255, 255);
	/* padding-bottom: 20rpx; */
}

.tabbar-container .tabbar-item {
	padding-top: 16rpx;
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	align-items: center;
	text-align: center;
}

.tabbar-container .item-active {
	color: #ec2928;
}

.tabbar-container .center-item {
	display: block;
	position: relative;
}

.tabbar-container .tabbar-item .item-top {
	width: 36rpx;
	height: 36rpx;
	/* padding: 10rpx; */
}

.tabbar-container .center-item .item-top {
	flex-shrink: 0;
	width: 144rpx;
	height: 144rpx;
	position: absolute;
	top: -50rpx;
	left: calc(50% - 72rpx);
	border-radius: 50%;
	box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
	/* box-shadow: 0 0 5px #999;  */
	background-color: #ec2928;
	background: url("../../../static/sao.jpg") no-repeat;
	background-size: contain;
}

.tabbar-container .tabbar-item .item-top image {
	width: 36rpx;
	height: 36rpx;
}

tabbar-container .tabbar-item:nth-child(3) .item-top image {
	background: #ff0000;
}

.tabbar-container .tabbar-item .item-bottom {
	margin-top: 14rpx;
	font-size: 20rpx;
	width: 100%;
}

.tabbar-container .center-item .item-bottom {
	position: absolute;
	bottom: 5rpx;
}
</style>  

3.在main.js中引用组件

import TabBar from "./components/common/tabbar/tabbar.vue"

Vue.component('TabBar', TabBar);

4.在所用到的组件中直接调用

<!-- 自定义tabbar -->
<TabBar :current-page="0" />