基于vuejs菜单实现

方式一：

<template>

<div class="panle-my-menu">
<div style="background-color:red;height:60px">
<tabbar class="mid-tabbar">
<tabbar-item selected link="/component/demo">
<img slot="icon" src="../../assets/festival/m1.png">
<span slot="label">通讯录</span>
</tabbar-item>

<!--<tabbar-item show-dot badge="2"  > -->
<tabbar-item  link="/component/demo"> 
<img slot="icon" src="../../assets/festival/m2.png">
<span slot="label">邀请</span>
</tabbar-item>
<tabbar-item  link="/component/demo">
<img slot="icon" src="../../assets/festival/m3.png">
<span slot="label">签到</span>
</tabbar-item>
<tabbar-item  link="/component/demo">
<img slot="icon" src="../../assets/festival/m4.png">
<span slot="label">热门</span>
</tabbar-item>
</tabbar>
</div>
</div>
</template>




<script>
import { Group,Icon,Panel,Tabbar,TabbarItem} from 'vux'  
export default {
data () {  
return {  
tag: '通讯录',  
taglist: ['通讯录', '邀请', '签到', '热门']  
}  
},  
components: {
      Group ,
 Tabbar,
 TabbarItem,
    }
}
</script>




<style scoped>
.panle-my-menu{
height:80px;
width:100%;
background-color:#FFFFFF;
text-color:#000000;
}


span{
width:100%; 
height:80px;
background-color:red;
}
.mid-tabbar{
height:80px;
width:100%;
}
/*
div.menu-tab{
    display:flex;
    width: 100%;
    height: 100px;
    line-height: 60px;
background: blue;
}
group{
width: 100%;
    height: 100%;
}
.tab-item{
    flex:1;
    text-align: center;
width:100%;
text-color:#000000;
}
img{
height:30px;
width:40px; 
}
tr{
height:0px;
}
*/


/*START中间菜单选项*/
.mid-menu{
width:100%; 
height:100px;
font: 12px verdana, arial, sans-serif; /*设置文字大小和字体样式 */
}
.mid-menu li { /*让文字横排*/
float: left; /*往左浮动*/
/*边框所在位置   
margin-left: 100px; 
margin-top: 8px;   */

/*子体所在位置  */
line-height: 50px;
text-align: center;
position: relative;
}
/*END*/

</style>

方式二：

<template>
<div class="m-tabbar">
<a class="m-tabbar-item is-active">
    <span class="m-tabbar-item-icon">
       < img src="../../assets/festival/m3.png" alt="">
    </span> 
    <span class="m-tabbar-item-text">  
          首页
    </span>
  </a> 
  <a class="m-tabbar-item">
    <span class="m-tabbar-item-icon">
       < img src="../../assets/festival/m3.png"alt="">
    </span> 
    <span class="m-tabbar-item-text">  
          书影音
    </span>
  </a> 
  <a class="m-tabbar-item">
    <span class="m-tabbar-item-icon">
       < img src="../../assets/festival/m3.png" alt="">
    </span> 
    <span class="m-tabbar-item-text">  
          广播
    </span>
  </a> 
  <a class="m-tabbar-item">
    <span class="m-tabbar-item-icon">
       < imgsrc="../../assets/festival/m3.png"alt="">
    </span> 
    <span class="m-tabbar-item-text">  
          小组
    </span>
  </a> 
  <a class="m-tabbar-item">
    <span class="m-tabbar-item-icon">
       < imgsrc="../../assets/festival/m3.png" alt="">
    </span> 
    <span class="m-tabbar-item-text">  
          我的
    </span>
  </a> 
</div>
</template>




<script>
import { Group,Icon,Panel,Tabbar,TabbarItem} from 'vux'  
export default {
data () {  
return {  
tag: '通讯录',  
taglist: ['通讯录', '邀请', '签到', '热门']  
}  
},  
components: {
      Group ,
 Tabbar,
 TabbarItem,
    }
}
</script>




<style lang="less">
.m-tabbar{
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    height: 100px;
    background: #fff;
    border-top: 1px solid #e4e4e4;
    
    .m-tabbar-item{
      flex: 1;
      text-align: center;
      .m-tabbar-item-icon{
          display: block;
          padding-top: 2px;
          img{
              width: 28px;
              height: 28px;
          }
      }
      .m-tabbar-item-text{
          display: block;
          font-size: 10px;
          color:#949494;
      }
      &.is-active{
          .m-tabbar-item-text{
              color: #42bd56;
          }
      }
  }
}
</style>