desenvolvimento vue de extremidade inferior de navegação móvel

renderings

 

src / app.vue

<Template>
  <Div id = classe "app" = "g-container">
    <Div class = "g-header-container">
      navegação cabeça
    </ Div>
    <Div class = "g-view-container">
      <Div class = "content">
        área de conteúdo
      </ Div>
      
    </ Div>
    <Div class = "g-footer-container">
      <Tabbar />
    </ Div>
  </ Div>
</ Template>

<script> 
  importação Tabbar de 'componentes / tabbar' ;

  exportação padrão {
    citar: 'App' ,
    componentes: {
      abas
    }
  }
</ Script>

<style escopo> 
  .g - recipiente {
    posição: relativa;
    largura: 100% ;
    altura: 100% ;
    max - width: 640px;
    min - largura: 320 pixels;
    margin: 0 auto;
    overflow: hidden;  
  }
  .g -header- recipiente {
    posição: absoluto;
    esquerda: 0 ;
    superior: 0 ;
    largura: 100% ;
    z -Index: 999 ;
    altura: 64px;
    background: rosa; 
  }
  .g -view- recipiente {
    altura: 100% ;
    estofamento - bottom: 50px;
    background: lightblue;
    overflow: auto;
  }
  .conteúdo{
    altura: 2000px;
  }
  .g -footer- recipiente {
    posição: absoluto;
    esquerda: 0 ;
    inferior: 0 ;
    largura: 100% ;
    caixa -shadow: 0 0 0 10px HSLA (0,6%, 58%, 0,6 );
    altura: 50 pixels;
    z -Index: 999 ;
    background: Lightgreen;
  }
</ Style>

 

src / componentes / tabbar / index.vue

<Template>
    <Div class = "g-tabbar">
        <Class roteador-link = "g-tabbar item" a = "/ home">
            <I class = "iconfont ícone-home"> </ i>
            <Span> Casa </ span>
        </ Router-link>
        <Class roteador-link = "g-tabbar item" a = "/ categoria">
            <I class = "icon-categoria iconfont"> </ i>
            <Span> Categoria página </ span>
        </ Router-link>
        <Class roteador-link = "g-tabbar item" a = "/ cart">
            <I class = "iconfont ícone-carro"> </ i>
            <Span> carrinho </ span>
        </ Router-link>
        <Class roteador-link = "g-tabbar item" a = "/ pessoal">
            <Class i = "iconfont icon-pessoal"> </ i>
            <Span> Centro de pessoal </ span>
        </ Router-link>
    </ Div>
</ Template>

<script> 
exportação padrão {
    citar: "Tabbar"
}
</ Script>

<style lang = "SCSS" escopo> 
    .g - tabbar {
        exibir: Flex;
        largura: 100% ;
        altura: 50 pixels;
        background: # fff;

        & - artigo {
            Flex: 1 ;
            exibir: Flex;
            justificar - conteúdo: center;
            alinhe - itens: center;
            Flex - sentido: coluna;
            color: # 333 ;
            font - size: 12px;

            .iconfont {
                margem - inferior: 4px;
                font - size: 18px;
            }
        }

    }
    .router -link- activo {
        cor vermelha;
    }
</ Style>

 

src / ativos / SCSS / _icons.scss

@ font-face { 
  font-family : "iconfont" ; 
  src : url ('? ../ fonts / iconfont.eot t = 1522237704791' ) ; / * IE9 * / 
  src : formato ( 'embedded-OpenType '), url (' ../ fonts / iconfont.eot t = 1522237704791 # IEFix?') / * IE6-IE8 * / 
  url (' data: application / x -font-woff ;charset = UTF-8; base64,d09GRgABAAAAABFEAAsAAAAAGkgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAAQgAAAFZW7kpQY21hcAAAAYAAAADwAAAC3hDqdNdnbHlmAAACcAAADEcAABH09Z93 / mhlYWQAAA64AAAAMQAAADYQ3YfraGhlYQAADuwAAAAgAAAAJAfZA9hobXR4AAAPDAAAABsAAABMTC7 / + 2xvY2EAAA8oAAAAKAAAACgoVix8bWF4cAAAD1AAAAAdAAAAIAEnAMhuYW1lAAAPcAAAAUUAAAJtPlT fXBvc3QAABC4AAAAiQAAALvQPTpueJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWKcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwYKl7EMDf8b2AAkgwNQGFGkBwA2tsL1QAAeJzFkjFuwkAQRf8GB + + + LEiQ0FdYQsqrScgJYjcBCugMQFuAEFx Asf12mikRF / vjTUESkiTKrZ 2OvjWz + + + BAFkL6QEPGpbOrzAzz3 wfAI4CB 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 / R + 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 == ') formato (' woff '),
  url (' ../ fonts / iconfont.ttf? t = 1522237704791 ') formato (' TrueType '), / * Chrome, Firefox, Opera, Safari, Android, iOS 4.2+ * / 
  url (' ../ fonts / iconfont ? .svg t = 1522237704791 # iconfont ') formato (' svg '); / * IOS 4.1- * / 
}

.iconfont { 
  font-family : "iconfont" importante ; 
  fonte de tamanho : 16 pixels ; 
  font-style : normal de ; 
  -webkit-font-suavização : suavizados ; 
  -moz-osx-font-suavização : escala de cinzentos ;
}

.icon-backtop: antes { 
  teor : "\ e689" ;
}

.icon-pessoal: antes { 
  teor : "\ E610" ;
}

.icon-scan: antes { 
  teor : "\ E609" ;
}

.icon-clara: antes { 
  teor : "\ E622" ;
}

.icon-msg: antes { 
  teor : "\ e7a8" ;
}

.icon-categoria: antes { 
  teor : "\ e7f9" ;
}

.icon-search: antes { 
  teor : "\ e616" ;
}

.icon-delete: antes { 
  teor : "\ e6ac" ;
}

.icon-serviço: antes { 
  teor : "\ e643" ;
}

-setting .icon: antes { 
  teor : "\ e64c" ;
}

.icon-back: antes { 
  teor : "\ e60f" ;
}

.icon-shop: antes { 
  teor : "\ e624" ;
}

.icon de perto: antes { 
  teor : "\ e60c" ;
}

.icon-mais: antes { 
  teor : "\ e85c" ;
}

.icon-home: antes { 
  teor : "\ e699" ;
}

.icon-coleta: antes { 
  teor : "\ e78c" ;
}

.icon-carro: antes { 
  teor : "\ E635" ;
}

 

src / ativos / SCSS / index.scss

@import 'ícones';

* { 
    Margem de : 0 ; 
    estofamento : 0 ;
} 
Html, corpo {
    // deve ser definido, caso contrário, o conteúdo do efeito rolando não pode ser alcançado
    largura : 100% ; 
    altura : 100% ;
}