uni app 实现中间凸起的 tabbar

先看效果

首先在pages.json文件中进行tabbar的样式和列表配置，代码如下：

"tabBar": {
   		"custom": true, //开启自定义tabBar  不填每次原来的tabbar在重新加载时都回闪现
		"color": "#B6C3D2",
		"selectedColor": "#2B2E3D",
		"borderStyle": "black",
		"backgroundColor": "#FFFFFF",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/img/TabBar/tabbar/msg.png",
				"selectedIconPath": "static/img/TabBar/active/meg_active.png",
				"text": "消息"
			},
			{
				"pagePath": "pages/todo/todo",
				"iconPath": "static/img/TabBar/tabbar/todo.png",
				"selectedIconPath": "static/img/TabBar/active/todo_active.png",
				"text": "待办"
			},
			{
				"text": "工作台",
				"pagePath": "pages/workBench/workBench",
				"iconPath": "static/img/TabBar/active/workBench.png",
				"selectedIconPath": "static/img/TabBar/active/workBench.png"
			},

			{
				"pagePath": "pages/contacts/contacts",
				"iconPath": "static/img/TabBar/tabbar/contacts.png",
				"selectedIconPath": "static/img/TabBar/active/contacts-active.png",
				"text": "通讯录"
			},
			{
				"pagePath": "pages/mine/mine",
				"iconPath": "static/img/TabBar/tabbar/my.png",
				"selectedIconPath": "static/img/TabBar/active/my_active.png",
				"text": "我的"
			}
		]

	}

在components封装一个Tabbar 组件

<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: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDIuODU0IiBoZWlnaHQ9IjEwMi45MzUiIHZpZXdCb3g9IjAgMCAxMDIuODU0IDEwMi45MzUiPjxwYXRoIGQ9Ik04OC41NDcgODcuMDY3YTUwLjk0MSA1MC45NDEgMCAwIDAgMTQuMzA2LTM1LjYgNTEuNDI2IDUxLjQyNiAwIDEgMC01MS4zODUgNTEuNDY3aDM3LjQ5MWE0LjcgNC43IDAgMCAwIDMuNjE4LTcuNzI4ek00MC4zNjggNTAuMjM0YzAgMy4yODktMS45NzMgNS4xOC01LjE4IDUuMThzLTUuMTgtMS44OTEtNS4xOC01LjE4di02Ljk4OGMwLTMuMjA2IDEuODkxLTUuMTggNS4xOC01LjE4czUuMTggMS44OTEgNS4xOCA1LjE4em0zMS41NzEgMGMwIDMuMjg5LTEuODkxIDUuMTgtNS4xOCA1LjE4LTMuMjA2IDAtNS4xOC0xLjg5MS01LjE4LTUuMTh2LTYuOTg4YzAtMy4yMDYgMS44OTEtNS4xOCA1LjE4LTUuMThzNS4xOCAxLjg5MSA1LjE4IDUuMTh6bTkuNyA0NS4xMzdjLjA4Mi0uMDgyLjA4Mi0uMTY0LjE2NC0uMzI5IDAgLjA4Mi4wODIuMTY0LjA4Mi4zMjloLS4yNDd6IiBmaWxsPSIjYWNhY2FjIi8+PC9zdmc+",  
                        selectIcon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDIuODU0IiBoZWlnaHQ9IjEwMi45MzUiIHZpZXdCb3g9IjAgMCAxMDIuODU0IDEwMi45MzUiPjxwYXRoIGRhdGEtbmFtZT0iaWNvbi3mtojmga8g77yI6YCJ5Lit77yJIiBkPSJNODguNTQ3IDg3LjA2N2E1MC45NDEgNTAuOTQxIDAgMCAwIDE0LjMwNi0zNS42IDUxLjQyNiA1MS40MjYgMCAxIDAtNTEuMzg1IDUxLjQ2N2gzNy40OTFhNC43IDQuNyAwIDAgMCAzLjYxOC03LjcyOHpNNDAuMzY4IDUwLjIzNGMwIDMuMjg5LTEuOTczIDUuMTgtNS4xOCA1LjE4cy01LjE4LTEuODkxLTUuMTgtNS4xOHYtNi45ODhjMC0zLjIwNiAxLjg5MS01LjE4IDUuMTgtNS4xOHM1LjE4IDEuODkxIDUuMTggNS4xOHptMzEuNTcxIDBjMCAzLjI4OS0xLjg5MSA1LjE4LTUuMTggNS4xOC0zLjIwNiAwLTUuMTgtMS44OTEtNS4xOC01LjE4di02Ljk4OGMwLTMuMjA2IDEuODkxLTUuMTggNS4xOC01LjE4czUuMTggMS44OTEgNS4xOCA1LjE4em05LjcgNDUuMTM3Yy4wODItLjA4Mi4wODItLjE2NC4xNjQtLjMyOSAwIC4wODIuMDgyLjE2NC4wODIuMzI5aC0uMjQ3eiIgZmlsbD0iIzE3NWNmZiIvPjwvc3ZnPg==",  
                        text: "消息",  
                        centerItem: false  
                    },{  
                        id: 1,  
                        path: "/pages/todo/todo",  
                        icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDQuMzI1IiBoZWlnaHQ9IjEwMS45MDEiIHZpZXdCb3g9IjAgMCAxMDQuMzI1IDEwMS45MDEiPjxwYXRoIGRhdGEtbmFtZT0i6Lev5b6EIDE1IiBkPSJNODAuNjcgMGExMy4yNjcgMTMuMjY3IDAgMCAxIDEzLjI2NyAxMy4wNDZWNDAuODY1bC0uMjgxIDguNjIyYTMwLjI4NyAzMC4yODcgMCAxIDAtMzEuMTQ1IDUxLjk0OWwtMTQuMjc1LS4wOTVIMTMuMjY4QTEzLjI2NyAxMy4yNjcgMCAwIDEgMCA4OC4zVjEzLjI2NUExMy4yNjcgMTMuMjY3IDAgMCAxIDEzLjA0OSAwaC4yMTl6TTMzLjQzNyA2Ny42NTJIMTguMzA5YTMuNDUgMy40NSAwIDAgMCAwIDYuOWgxNS4xMjhhMy40NSAzLjQ1IDAgMCAwIDAtNi45em0xMC4wODQtMjQuOTM4SDE4LjMwOWEzLjQ1IDMuNDUgMCAwIDAgMCA2LjlINDMuNTJhMy40NSAzLjQ1IDAgMSAwIDAtNi45em0yNC41LTI0LjkzOEgxOC4yMjlhMy40NSAzLjQ1IDAgMCAwIC4wODEgNi45SDY4LjFhMy40NSAzLjQ1IDAgMCAwLS4wODEtNi45eiIgZmlsbD0iI2FjYWNhYyIvPjxwYXRoIGRhdGEtbmFtZT0i6Lev5b6EIDE2IiBkPSJNNzcuODk4IDQ5LjA0N0EyNi40MjggMjYuNDI4IDAgMSAxIDUxLjQ3IDc1LjQ3NGEyNi40MjggMjYuNDI4IDAgMCAxIDI2LjQyOC0yNi40Mjd6bTIuNzg5IDExLjk1MmEyLjY1NyAyLjY1NyAwIDAgMC0yLjY1NiAyLjY1N3YxMi42NTZsLTcuNjA1IDktLjA1LjA2MWEyLjY1NiAyLjY1NiAwIDAgMCA0LjEwNyAzLjM2N2w3Ljk0LTkuNGEyLjY0OCAyLjY0OCAwIDAgMCAuOTIxLTIuMDExVjYzLjU4MWEyLjY1NiAyLjY1NiAwIDAgMC0yLjY1OC0yLjU4MnoiIGZpbGw9IiNhY2FjYWMiLz48L3N2Zz4=",  
                        selectIcon: "data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9Imljb24t5b6F5Yqe77yI6YCJ5Lit77yJIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDQuMzI1IiBoZWlnaHQ9IjEwMS45MDEiIHZpZXdCb3g9IjAgMCAxMDQuMzI1IDEwMS45MDEiPjxwYXRoIGRhdGEtbmFtZT0i6Lev5b6EIDE1IiBkPSJNODAuNjcgMGExMy4yNjcgMTMuMjY3IDAgMCAxIDEzLjI2NyAxMy4wNDZWNDAuODY1bC0uMjgxIDguNjIyYTMwLjI4NyAzMC4yODcgMCAxIDAtMzEuMTQ1IDUxLjk0OWwtMTQuMjc1LS4wOTVIMTMuMjY4QTEzLjI2NyAxMy4yNjcgMCAwIDEgMCA4OC4zVjEzLjI2NUExMy4yNjcgMTMuMjY3IDAgMCAxIDEzLjA0OSAwaC4yMTl6TTMzLjQzNyA2Ny42NTJIMTguMzA5YTMuNDUgMy40NSAwIDAgMCAwIDYuOWgxNS4xMjhhMy40NSAzLjQ1IDAgMCAwIDAtNi45em0xMC4wODQtMjQuOTM4SDE4LjMwOWEzLjQ1IDMuNDUgMCAwIDAgMCA2LjlINDMuNTJhMy40NSAzLjQ1IDAgMSAwIDAtNi45em0yNC41LTI0LjkzOEgxOC4yMjlhMy40NSAzLjQ1IDAgMCAwIC4wODEgNi45SDY4LjFhMy40NSAzLjQ1IDAgMCAwLS4wODEtNi45eiIgZmlsbD0iIzE3NWNmZiIvPjxwYXRoIGRhdGEtbmFtZT0i6Lev5b6EIDE2IiBkPSJNNzcuODk4IDQ5LjA0N0EyNi40MjggMjYuNDI4IDAgMSAxIDUxLjQ3IDc1LjQ3NGEyNi40MjggMjYuNDI4IDAgMCAxIDI2LjQyOC0yNi40Mjd6bTIuNzg5IDExLjk1MmEyLjY1NyAyLjY1NyAwIDAgMC0yLjY1NiAyLjY1N3YxMi42NTZsLTcuNjA1IDktLjA1LjA2MWEyLjY1NiAyLjY1NiAwIDAgMCA0LjEwNyAzLjM2N2w3Ljk0LTkuNGEyLjY0OCAyLjY0OCAwIDAgMCAuOTIxLTIuMDExVjYzLjU4MWEyLjY1NiAyLjY1NiAwIDAgMC0yLjY1OC0yLjU4MnoiIGZpbGw9IiMxNzVjZmYiLz48L3N2Zz4=",  
                        text: "待办",  
                        centerItem: false  
                    },{  
                        id: 2,  
                        path: "/pages/workBench/workBench",  
                        icon: "../../static/img/TabBar/active/workBench.png",  
						selectIcon:'../../static/img/TabBar/active/workBench.png',
                        text: "工作台",  
                        centerItem: true  
                    },{  
                        id: 3,  
                        path: "/pages/contacts/contacts",  
                        icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDUuMjU5IiBoZWlnaHQ9IjEwNS4yNTkiIHZpZXdCb3g9IjAgMCAxMDUuMjU5IDEwNS4yNTkiPjxwYXRoIGQ9Ik0xNS4wMzcgMHYxMDUuMjU5SDcuNTE5QTcuMSA3LjEgMCAwIDEgMCA5Ny43NDFWNy41MTlBNy4xIDcuMSAwIDAgMSA3LjUxOSAwaDcuNTE5ek0xOC44IDBoNzguOTQxYTcuMSA3LjEgMCAwIDEgNy41MTkgNy41MTl2OTAuMjIyYTcuMSA3LjEgMCAwIDEtNy41MTkgNy41MTlIMTguOFYwem00MS4zNDggNTIuNjNhMTUuMDM3IDE1LjAzNyAwIDEgMC0xNS4wMzctMTUuMDM4QTE1LjA4MSAxNS4wODEgMCAwIDAgNjAuMTQ4IDUyLjYzek0zOS4xIDc4Ljk0NGM1LjI2MyA2LjAxNSAzNi44NDEgNS4yNjMgNDIuMSAwcy0zLjAwNy0yMi41NTUtMjEuMDUyLTIyLjU1NVMzMy44MzMgNzIuOTI5IDM5LjEgNzguOTQ0eiIgZmlsbD0iI2FjYWNhYyIvPjwvc3ZnPg==",  
                        selectIcon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDUuMjU5IiBoZWlnaHQ9IjEwNS4yNTkiIHZpZXdCb3g9IjAgMCAxMDUuMjU5IDEwNS4yNTkiPjxwYXRoIGQ9Ik0xNS4wMzcgMHYxMDUuMjU5SDcuNTE5QTcuMSA3LjEgMCAwIDEgMCA5Ny43NDFWNy41MTlBNy4xIDcuMSAwIDAgMSA3LjUxOSAwaDcuNTE5ek0xOC44IDBoNzguOTQxYTcuMSA3LjEgMCAwIDEgNy41MTkgNy41MTl2OTAuMjIyYTcuMSA3LjEgMCAwIDEtNy41MTkgNy41MTlIMTguOFYwem00MS4zNDggNTIuNjNhMTUuMDM3IDE1LjAzNyAwIDEgMC0xNS4wMzctMTUuMDM4QTE1LjA4MSAxNS4wODEgMCAwIDAgNjAuMTQ4IDUyLjYzek0zOS4xIDc4Ljk0NGM1LjI2MyA2LjAxNSAzNi44NDEgNS4yNjMgNDIuMSAwcy0zLjAwNy0yMi41NTUtMjEuMDUyLTIyLjU1NVMzMy44MzMgNzIuOTI5IDM5LjEgNzguOTQ0eiIgZmlsbD0iIzE3NWNmZiIvPjwvc3ZnPg==",  
                        text: "通讯录",  
                        centerItem: false  
                    },{  
                        id: 4,  
                        path: "/pages/mine/mine",  
                        icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5Mi44MDciIGhlaWdodD0iMTA0LjQxNCIgdmlld0JveD0iMCAwIDkyLjgwNyAxMDQuNDE0Ij48cGF0aCBkPSJNNDYuNCAwaDI5djI5LjAwNUEyOS4wMDUgMjkuMDA1IDAgMSAxIDQ2LjQgMHpNMjAuMyA2My44MTRoNTIuMjA3YTIwLjMgMjAuMyAwIDAgMSAyMC4zIDIwLjN2Mi45YTE3LjQgMTcuNCAwIDAgMS0xNy40IDE3LjRIMTcuNEExNy40IDE3LjQgMCAwIDEgMCA4Ny4wMTR2LTIuOWEyMC4yODYgMjAuMjg2IDAgMCAxIDIwLjMtMjAuM3oiIGZpbGw9IiNhZWFlYWUiLz48L3N2Zz4=",  
                        selectIcon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5Mi44MDciIGhlaWdodD0iMTA0LjQxNCIgdmlld0JveD0iMCAwIDkyLjgwNyAxMDQuNDE0Ij48cGF0aCBkYXRhLW5hbWU9Imljb24t5oiR55qE77yI6YCJ5Lit77yJIiBkPSJNNDYuNCAwaDI5djI5LjAwNUEyOS4wMDUgMjkuMDA1IDAgMSAxIDQ2LjQgMHpNMjAuMyA2My44MTRoNTIuMjA3YTIwLjMgMjAuMyAwIDAgMSAyMC4zIDIwLjN2Mi45YTE3LjQgMTcuNCAwIDAgMS0xNy40IDE3LjRIMTcuNEExNy40IDE3LjQgMCAwIDEgMCA4Ny4wMTR2LTIuOWEyMC4yODYgMjAuMjg2IDAgMCAxIDIwLjMtMjAuM3oiIGZpbGw9IiMxNzVjZmYiLz48L3N2Zz4=",  
                        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  
                });  
				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: 110rpx;  
        /* 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: #fff;
    }  
    .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: #175CFF;  
    }  
    .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: 0px 3px 20px rgba(0, 0, 0, 0.16);
        /* box-shadow: 0 0 5px #999;  */
        background-color: #ffffff;  
    }  
    .tabbar-container .tabbar-item .item-top image{  
		width: 100%;
		height: 100%;
    }  
		
	tabbar-container .tabbar-item:nth-child(3) .item-top image{
		background:#ff0000;
	}

    .tabbar-container .tabbar-item .item-bottom{  
        font-size: 28rpx;  
        width: 100%;  
    }  
    .tabbar-container .center-item .item-bottom{  
        position: absolute;  
        bottom: 5rpx;  
    }  
</style>  

在mian.js 全局注册

import TabBar from "./components/TabBar/TabBar.vue"
Vue.component('TabBar', TabBar);  

再页面使用

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