在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中文網其他相關文章！