这次给大家带来vue首页底部导航tabbar，在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'}">
 <p :class="{bottombarcoloractive:iscolor}">展图</p></router-link></li>
<li @click="tocolor2"> <router-link :to="{name:'agenda'}">
 <p :class="{bottombarcoloractive:iscolor2}">议程</p></router-link></li>
<li @click="tocolor3"> <router-link :to="{name:'recommend'}">
 <p :class="{bottombarcoloractive:iscolor3}">推荐</p></router-link></li>
<li @click="tocolor4"> <router-link :to="{name:'attention'}">
 <p :class="{bottombarcoloractive:iscolor4}">关注</p></router-link></li>
<li @click="tocolor5"> <router-link :to="{name:'intro'}">
 <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>
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
用video.js实现h5直播界面
jenkins+node.js的持续集成
以上就是在vue首页怎样做出底部导航tabbar的详细内容。