vue开发移动端底部导航条功能

<template>
 <div id="app" class="g-container">
  <div class="g-header-container">
   头部导航
  </div>
  <div class="g-view-container">
   <div class="content">
    内容区域
   </div>
   
  </div>
  <div class="g-footer-container">
   <tabbar />
  </div>
 </div>
</template>

<script>
 import Tabbar from 'components/tabbar';

 export default {
  name: 'App',
  components:{
   Tabbar
  }
 }
</script>

<style scoped>
 .g-container{
  position: relative;
  width:100%;
  height:100%;
  max-width:640px;
  min-width:320px;
  margin:0 auto;
  overflow:hidden; 
 }
 .g-header-container{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  z-index:999;
  height:64px;
  background:pink; 
 }
 .g-view-container{
  height:100%;
  padding-bottom:50px;
  background:lightblue;
  overflow:auto;
 }
 .content{
  height:2000px;
 }
 .g-footer-container{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6);
  height:50px;
  z-index:999;
  background:lightgreen;
 }
</style>

<template>
  <div class="g-tabbar">
    <router-link class="g-tabbar-item" to="/home">
      <i class="iconfont icon-home"></i>
      <span>首页</span>
    </router-link>
    <router-link class="g-tabbar-item" to="/category">
      <i class="iconfont icon-category"></i>
      <span>分类页</span>
    </router-link>
    <router-link class="g-tabbar-item" to="/cart">
      <i class="iconfont icon-cart"></i>
      <span>购物车</span>
    </router-link>
    <router-link class="g-tabbar-item" to="/personal">
      <i class="iconfont icon-personal"></i>
      <span>个人中心</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name:"Tabbar"
}
</script>

<style lang="scss" scoped>
  .g-tabbar{
    display:flex;
    width:100%;
    height:50px;
    background:#fff;

    &-item{
      flex:1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color:#333;
      font-size:12px;

      .iconfont{
        margin-bottom:4px;
        font-size:18px;
      }
    }

  }
  .router-link-active{
    color:red;
  }
</style>

@font-face {
 font-family: "iconfont";
 src: url('../fonts/iconfont.eot"iconfont" !important;
 font-size: 16px;
 font-style: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icon-backtop:before {
 content: "\e689";
}

.icon-personal:before {
 content: "\e610";
}

.icon-scan:before {
 content: "\e609";
}

.icon-clear:before {
 content: "\e622";
}

.icon-msg:before {
 content: "\e7a8";
}

.icon-category:before {
 content: "\e7f9";
}

.icon-search:before {
 content: "\e616";
}

.icon-delete:before {
 content: "\e6ac";
}

.icon-service:before {
 content: "\e643";
}

.icon-setting:before {
 content: "\e64c";
}

.icon-back:before {
 content: "\e60f";
}

.icon-shop:before {
 content: "\e624";
}

.icon-close:before {
 content: "\e60c";
}

.icon-more:before {
 content: "\e85c";
}

.icon-home:before {
 content: "\e699";
}

.icon-collect:before {
 content: "\e78c";
}

.icon-cart:before {
 content: "\e635";
}

@import 'icons';

*{
  margin:0;
  padding:0;
}
html,body{
  // 必须设置，否则内容滚动效果无法实现
  width:100%;
  height:100%;
}