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

这次给大家带来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:&#39;MapPlat&#39;}"> 
        ![](../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:&#39;Agenda&#39;}"> 
       ![](../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:&#39;Recommend&#39;}">
        ![](../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:&#39;Attention&#39;}">
        ![](../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:&#39;Intro&#39;}"> 
       ![](../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: &#39;index&#39;,
  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>

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

相关阅读：

用Video.js实现H5直播界面

Jenkins+Node.js的持续集成

以上是在vue首页怎样做出底部导航TabBar的详细内容。更多信息请关注PHP中文网其他相关文章！