预览图：
一、配置page.jsong中的tabbar（这一步是必须的，因为我们在使用uni.switchTab()时必须要用到）
"tabBar": {"list": [{"pagePath": "pages/index/index","iconPath": "static/images/icon/home.png","selectedIconPath": "static/images/icon/home_select.png","text": "首页"}, {"pagePath": "pages/OldGoods/OldGoods","iconPath": "static/images/icon/home.png","selectedIconPath": "static/images/icon/home_select.png","text": "二手"},{"pagePath": "pages/list/list","iconPath": "","selectedIconPath": "","text": "权益"},{"pagePath": "pages/IntegralMall/IntegralMall","iconPath": "","selectedIconPath": "","text": "积分商城"},{"pagePath": "pages/me/me","iconPath": "static/images/icon/me.png","selectedIconPath": "static/images/icon/me_select.png","text": "我的"}]}
二、编写tabbar组件
view:
<view class="tab-bar"><view class="center-btn-box"><view class="center-btn" @click="SwitchTab('/pages/list/list',2)"><image class="center-icon" src="../../static/images/label/cent_btn.png"></image></view></view><view class="tab-list"><view :class="['tab-item',pageindex===index?'action':'']" v-for="(item,index) in list" @click="SwitchTab(item.path,index)"><view class="tab-icon"><image :src="pageindex===index?item.iconAction:item.icon" class="icon"></image></view><view class="tab-name">{{item.title}}</view></view></view></view>
css:这里就省略了，我中间那个其实就是用一个元素把中间那个选项给遮挡住，点击时使用uni.switchTab()仅此而已
js:我这里使用props属性的方式传值，因为点击时要做页面状态的切换，
props:{pageindex:Number},name:"TabBar",data() {return {list:[{title:"首页",icon:"../../static/images/label/tab_sy_01.png",iconAction:"../../static/images/label/tab_sy_02.png",path:"/pages/index/index?id=0"},{title:"二手",icon:"../../static/images/label/tab_es_01.png",iconAction:"../../static/images/label/tab_es_02.png",path:"/pages/OldGoods/OldGoods"},{title:"权益",icon:"../../static/images/label/tab_qy_01.png",iconAction:"../../static/images/label/tab_qy_02.png",path:"/pages/list/list"},{title:"积分商城",icon:"../../static/images/label/tab_jf_01.png",iconAction:"../../static/images/label/tab_jf_02.png",path:"/pages/IntegralMall/IntegralMall"},{title:"我的",icon:"../../static/images/label/tab_wd_01.png",iconAction:"../../static/images/label/tab_wd_02.png",path:"/pages/me/me"}]};},
使用组件：
<template><TabBar :pageindex="0"></TabBar>
</template>
<script>import TabBar from "@/components/TabBar/TabBar.vue"export default {components:{TabBar}}
</script>
