在vue首页怎样做出底部导航TabBar

<template>
 <div class="index">
 <div class="mainContent">
 <router-view></router-view> 
 </div>
 <div class="bottomBar">
 <ul>
 <li @click="toColor" > <router-link :to="{name:'MapPlat'}"> 
 ![](../assets/images/ic_map_nor@2x.png)![](../assets/images/ic_map@2x.png) <p :class="{bottomBarColorActive:isColor}">展图</p></router-link></li>
 <li @click="toColor2"> <router-link :to="{name:'Agenda'}"> 
 ![](../assets/images/ic_yicheng_nor@2x.png)![](../assets/images/ic_yicheng@2x.png) <p :class="{bottomBarColorActive:isColor2}">议程</p></router-link></li>
 <li @click="toColor3"> <router-link :to="{name:'Recommend'}">
 ![](../assets/images/ic_tuijian_nor@2x.png)![](../assets/images/ic_tuijian@2x.png) <p :class="{bottomBarColorActive:isColor3}">推荐</p></router-link></li>
 <li @click="toColor4"> <router-link :to="{name:'Attention'}">
 ![](../assets/images/ic_guanzhu_nor@2x.png)
 ![](../assets/images/ic_guanzhu@2x.png) <p :class="{bottomBarColorActive:isColor4}">关注</p></router-link></li>
 <li @click="toColor5"> <router-link :to="{name:'Intro'}"> 
 ![](../assets/images/ic_jianjie_nor@2x.png)
 ![](../assets/images/ic_jianjie@2x.png) <p :class="{bottomBarColorActive:isColor5}">简介</p></router-link></li>
 </ul>
 </div> 
 </div></template><script>export default { name: 'index',
 data () { return { isColor:true, isColor2:false, isColor3:false, isColor4:false, isColor5:false
 }
 }, methods:{ toColor:function(){ this.isColor=true; this.isColor2=false; this.isColor3=false; this.isColor4=false; this.isColor5=false;
 }, toColor2:function(){ this.isColor=false; this.isColor2=true; this.isColor3=false; this.isColor4=false; this.isColor5=false;
 }, toColor3:function(){ this.isColor=false; this.isColor2=false; this.isColor3=true; this.isColor4=false; this.isColor5=false;
 }, toColor4:function(){ this.isColor=false; this.isColor2=false; this.isColor3=false; this.isColor4=true; this.isColor5=false;
 }, toColor5:function(){ this.isColor=false; this.isColor2=false; this.isColor3=false; this.isColor4=false; this.isColor5=true;
 },
 }
}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.index { height: 100%;
}.bottomBar { height: 100px; width: 100%; border: 1px solid #ccc; bottom: 0; background: rgba(255,255,255,0.90); position: fixed; bottom: 0;
}.bottomBar ul { display: flex; width: 100%; justify-content:space-around;
}.bottomBar ul li { /*width: 20%;*/}.bottomBar ul li img { margin: 8px 0;
}.bottomBar ul li p { font-family: "PingFangSC-Regular"; font-size: 20px; color: #D2D7E8; letter-spacing: 0; line-height: 20px;
}.mainContent { height:-webkit-calc(100% - 100px); height:-moz-calc(100% - 100px); height:calc(100% - 100px);
}.bottomBarColorActive { color: #4D81EE !important;
}</style>

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

用Video.js实现H5直播界面

Jenkins+Node.js的持续集成