美文网首页
vue首页底部导航TabBar

vue首页底部导航TabBar

作者: 飞鱼_JS | 来源:发表于2017-08-24 20:34 被阅读0次
    <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>
    
    

    相关文章

      网友评论

          本文标题:vue首页底部导航TabBar

          本文链接:https://www.haomeiwen.com/subject/kpxydxtx.html