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?t=1522237704791'); /* ie9*/
  src: url('../fonts/iconfont.eot?t=1522237704791#iefix') format('embedded-opentype'), /* ie6-ie8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09grgabaaaaabfeaasaaaaagkgaaqaaaaaaaaaaaaaaaaaaaaaaaaaaaabhu1vcaaabcaaaadmaaabcsp6z7u9tlziaaae8aaaaqgaaafzw7kpqy21hcaaaayaaaadwaaac3hdqdndnbhlmaaaccaaadecaabh09z93/mhlywqaaa64aaaamqaaadyq3yfraghlyqaaduwaaaagaaaajafza9hobxr4aaapdaaaabsaaabmtc7/+2xvy2eaaa8oaaaakaaaacgovix8bwf4caaad1aaaaadaaaaiaenamhuyw1laaapcaaaauuaaajtplt+fxbvc3qaabc4aaaaiqaaalvqptpuejxjygrgyobikgpqywb0cfmjyebgyggaajamy05meijqdmodyrgaaq4gzooiagckiwnpahicy2bkywkcwmdkwmhuyxsggyghh0izvmywyurgygbiygvmwaoc0lxtgbwykl7emdf8b2aakgwnqgfgkbwa2tsl1qaaejzfkjfuwkaqrf8gb+leiq0fdyqsqrscgjyjcbcugmqfuaefx+asf12mikrf/vjtueskitkrz+2ovjwz+wfai4cb+bafkl6qepgpborzazz3+qinnvu8a1dgw5ivg045y8sfl1xxyz2pezcp+dytlxeprarvqo5fulwv+y8rvaxeuknfj93qfrp1/yihncgxxhaj1binf1hvjyl9x+nbqppvdz1nxoakwmrpyhpygb0rwjv4m42jyehu6nxbmympymvkblgwuytle1pflzfp4nbimxbvehwori4i74z8rd4yoyt8nviy3dqg/gapw2evejylvwumhmdx7zqe/8zu7oz89np7m7md0d3ele/2e9y9dy0esr1f8kjjperjz1kiy1q0kyqmbss2ltk04wgqitkqrjmydiosgbtgbbmeaqgoashwwjij4wqika8v0/nyiglyqhq4cwzrhqnevsmkrgga5hauu7q6urqr+nv1nreiufyp9gwaira5iuytrbkbebbr4ce5alsivp2rgvmrhm9o0iiikllg1+kcel5ou41ok/restqgcuvovhqdqm5f0g7nc31ouawabd53e7o6kqafbzutfx8z3s49b04pgdhmj+oliqw7ubbkt+jpddadpiulgibzhg8k4ajnkokiivelgpfzxi6ncsxqs1fux/5eoz++99hwa4wqpwccpg1wvpz8yokzm/e7mxotdfzkjermlhgm2vcjh2szsy+e/0twt0rbr9brghknekrmxkmhzbfs7ytrpeqd10tctq5rq1thpestmdsrtptoebzkpfcrixoi6/cicx9n7hinj446in4hsr+mx+f7vabtgmb9bz4i2kfwu9bboxjfyd92vvqgjn0hgjm6kv/qdnnm7jex5uphnqzc85zhpjmr/fwu2amp2z1/o8fhgi1sb+duvt35a/fcdwh1l3zykvuahh36sh0u6swubgue8gjp0/rfab/tcylpnrgdi5jlva7phgtmoyvltoifwuukvadae+ehjsu215nrumawoe9y/etbaphyzzaeif5fxpgfuu++p/yzj57//d5y7s/u4rhds/1l+kpya7eek9z9y8v3czaz3vjaeaodwk8vxfoz36e9if7l5cvxl1cthjret+n9rwco7gv2evaidmakwbn/epmhn7e7gtpqu2n3zj20ohn2+djpbds0fhz9z56nfwijpmcrnfeqdxni+eecs69zbjubvzscjfgbgtjudrqu59iu12y4tlgj/ldv6ans1j4fybll/dbqd3au9janbdqhvvgliyxjmmtjgp2wbsbc41ktldkedasaxhvptr0pdm+aimu4cpmrro+roq8g3jmizgbmd5lthepj1soijincovgwnzjasfzwgqe/u58zdhhzz+jg6l/b+6a/qbug/swcdyk3hr+e7pdtxodguh6a6yfofio/jeuspmvdkkgdh30bcz0getjglsj7yqr5eclbd9sm84dj2mlqvehlcgitgcdgbylu2sy1q/d67n8bbh/xrfckiubvv+oqebucguqek7hmdw1+husmrvh5tn7d+kox8r3vqm9bnw/z9qfvjeel4ub1wfo8rd4o3/kkspr3ppgetlxgzcqgusb429wvesxg/gbk3q8bgviaywjxvva+nw1x8re+2eca+ppw83xusg/bbmbego3c6stqdohnse4wgfthq9enzwrggxaw916nv2mozdhq9chmsgnpd7pizdyz/ljnxslq7jpyzftfwnaw1tgbmudzuhm9yt1gdp8bqfeu7uvt5lidvudt0zbc68vgddoarix4qq58xtk+vogawxyrv88xwraxrd8srnf6fyy0hwrid/v2wlarrejjt8hohjzt27n6o0ii0mc+bfgqfuazfc48cmxaj2l8v01kfvzoabqjgkrenpafskwokgpkffocogesulhdxpjaoshgfk1t/v/wt/+f42ht6c4swfjnwkkwmj+dh4x16vsnem84ncy3vny9h1xx3tezmuc23aazfux/opiqdjh3h3qxlumau0cquaelv1ae/gh9ct0j2ngkplebbcqwmghvr4fmjnctn1pviuw2m7lz4+yz/sb9jny/sx9m1kz9luypohlxxqfpuxruweosjl4uqxo9/jsl+707kzsuf1uqgexdooeorw9aiocxupav9hgaigvcnqiiyl9saatcmalswu8qwjbxoifinyftj3wd+d/jnzi9vg1don6tmsanawtkh4a8et0xo/4jstriit+m32smgasd7zfyqjjnd+grdntgfo5qxggf4/wwshvrshtowsyiw2c48jqjlosjr/bjueociqtrdv1jdhgbs0s6ju4xxrcmz6evctcp+kr8/njiz2hj5voi8qxpxfhy2yu+fbqbajrjpzeesj/9xx1yrtizwf/4ju8/wrt90vjtvjl5het3t03cfneqttnbdxbwib3xr+gjxc5+afcsnh1m+jppio/hb8n1e6d3wa9/w5yuntj3ny82kfqpxrcep++j/zizfskisxoyhatn9g+lmbynnazymuv//bv9bwojrk6q30ondg/pblpur4qe1wgbevcrgilqierhhjuyauidqiyjafmyuyrcqwzwgkhlcuvgepkifcpwonvsdbzqh+eyagmmghjimdj+soaqpef+f+am+dma52hebmh3b+jdadiaeqvq9fz2wwcchbelggvbvjhuzvstfhkpkrb97nao297feli8n0hsb+gkzd3ec1upsf/td2qarzoftvjpvb1psah3csbve4shkgbjfnrca7iswkf1icypxfrxdja5vv7kerst8x9tebg/mxfvvhtlumj6yjptlvovvzzvfnlvporx4wh+rraxnx9qfdp9dpepmbffpnpx7izuzsuu3eetcz5pwfbuzblhlc34rqmhiiw1bst7lvu7ihpvv+qtan2ylffhkmwblfex7hty8kiswhpk6cj+tgsrwj/ajuoneggrao/2hlbvjiwqpyxotadu+z7fm0vbwxueo6yyo4tfxrvztvsqlz5ocqqdvpsvzyvdrz44mrarny+ukkqzrhf2nlimez37z+othw82wnkcluatb0sggh8bjjyndzcxgavuvoepjypzpx5mh0oprhxwz1z0eejpwt2zsgi+zprijb9jnjm7i9jrgp19gtnfjbpbycgcprw18vagfqqcj7k70xzmy+xwvlkcy5dlixmdfury4rwbhda1cl8uoljdgsedg0am20vcisqxa2nvc7rrpbf6u96qrh633nhvbkvu4bpv7ly1wy2u3v4m3chyorcl4yi7qykgwcgliy1rctjq9ppypsdzqvk+pep1scvwp6knwb+f8vth8reow/j2/mittvef3i6m8n8rbuax/5qfkurbc/gf6jraowohclt28t/tkkbiu6jlbb2ukxfalsfjua2w7xejsxfysyxauxr0e+cxyz7714d+ukj/z+290cwykpajmnxtld03rcoyjky8t9ztpkgk+ugketdrae8cldqnentzthl4h9h0/ez8ztmnt56b3wdofv1o/mbrw4epqubo4rdfjaecoqmnoorju4ryrta+nfmtobyu4id1yfefiwqkqc6ihmi55v0tmtxflerwncg6a4aiorrwe1my7f0pnjttrdmspvhr84fvqcgmvmkvpwaug/h7uio3zj/rl+goazo95apkmhprmcvmwfravj92me8pbimqouwp1t8a3nqkyqzdfibxrmkmngoz9cpgcadtnodaks28jj4v1gk6d7bxnohqibjanqao0jzuyaz0xgkcmqaaxsyencagejh+0rvzi580pvy+nm7kghzviqyqu7vapift0uwnv9wvyz1luqbuak95ddwu9wxbscp+vrkgucvvmdoae+wytmdhhrgtc7n4g66pkhfifw5ljojvjflycfn+w2e6nzlvqnr9rnnldbx3az69y0sihgzeejogbwuxu2qfplrxfhwxd8m0n8+4ja64jogeyecq3vbgvp/nzox8a0lbohzmcrtxzisyl3e8us5z+fmpscfm147pu46kc8dey+z5tpto57lsvjgu738wa9pvzfa5ommz2quvaiy3evhjjq92tlqnmcrvi9auqqqtr3q6xmvkq5pcwe5jshevzkpk8stoi3dtv9d+qh9fs/gunyx3k4+rt6ff+loypmryxys3tjb4phvz4s0mw5gbtnm1xmbvevbic9hfpweihfyiljzqbh3w18dlz7ogz10sesqtqckukxiddrga78v1gt4wtymjhaj/ywtfjv6qds/+4yarughckkuldun85m7dstyl6rp6v8ls78zuudk2mlv5rwkhm4w/yxxefsfj2rjx/ymjhmzhy+k1evqrf5f1/ualaj/k+jvmpfizqh2o+vayglwlg522p7nvlavw7bvy1gwsgfjmcpxfx3z4qa0fjf3ox9p5mpgcynf6qlnmz7p+kjrox2c61z/yx7v/af8aejxjygrgyabi9uzb9fh8nl8zufkyqodaw0ucmpr/7//twriy3yfcdgymkcgasnmmjwaaahicy2bkygbu+n/aempi8v83awmlawnqbauiawb8mgs6ejxjywbgyh7jwmdcqaj2awjgdph/vwfvqwn0aaaaaaaadgdeavab4gj8avidtgqgbeaeyaxobhogrgckb0qh3ghecpp4ngngzgbgegbyw8dfaajmqmwfzv8h8xkahy0b8aaaahiczy9ntsmweivf+gekeqqoyifkbwibkp0rq25yvgr3xxtfpk6bkokjx63ua3aejsajoalcgdvwscebnpbh37x5y08a3oahho7flferpvwyo3inf7gxrln/eg6qx4sbaonvuex9tdjhm6bcbxrheypxugl2hhdhdx18cndwju/hovuv4qb5w7ijo/wkt9dx6si+5l5xui1hl/bhvi+cxqnlqcwhysktob+cmv7vkowt0uqca1vejlodof9ju51pw91t7ndd5yivwzoqcas6syzkrdnq0aub5/jrrxejhoqm5vhj/rbgao5xbyuldowxqhhkimro6dtvzvsvsupcxntwpc3ndfsu1p9zhqec9m9cu7qy0nk6t4e9xxtsdxqrbsueldsrxs1jerjcxta2velqatzlv44relzrit8oz0j/aalabsgaaab4ng2m2w6cmbafe2shihfxb+u6awjhsbsx+vdcfhvetjljgbdxpxr3nxybfccuqobry4sgo+xxwbennhhbfs1udm9/d/w0netzutyprmocppkjhfsmuas5mhsaplvedpfvq6ky+czpnfc6zspu0zqh3ou8xduljzqeeh3fs8yobmqhmxnfhbqomaaaaa==') format('woff'),
  url('../fonts/iconfont.ttf?t=1522237704791') format('truetype'), /* chrome, firefox, opera, safari, android, ios 4.2+*/
  url('../fonts/iconfont.svg?t=1522237704791#iconfont') format('svg'); /* ios 4.1- */
}

.iconfont {
  font-family: "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%;
}