vue desarrollo del extremo inferior de navegación móvil

representaciones

 

src / app.vue

<template> 
  <div id = clase "aplicación" = "g-contenedor"> 
    <div class = "g-header-contenedor"> 
      头部导航
     </ div> 
    <div class = "g-view-contenedor"> 
      < div class = "contenido"> 
        内容区域
       </ div> 
      
    </ div> 
    <div class = "g-pie de página-contenedor"> 
      <TabBar /> 
    </ div> 
  </ div> 
</ template> 

<script> 
  importación Tabbar de 'componentes / barra de pestañas' ; 

  exportación por defecto { 
    nombre: 'App' , 
    componentes:

- recipiente { 
    position: relative; 
    anchura: 100% ; 
    altura: 100% ; 
    max - anchura: 640px; 
    min - anchura: 320px; 
    Margen: 0 auto; 
    overflow: hidden;  
  } 
  .G -header- recipiente { 
    position: absolute; 
    la izquierda: 0 ; 
    top: 0 ; 
    anchura: 100% ; 
    z -índice: 999 ; 
    altura: 64px; 
    fondo: rosa; 
  } 
  .G -view-recipiente { 
    altura: 100% ; 
    acolchado - inferior: 50px; 
    fondo: azul claro; 
    overflow: auto; 
  } 
  .Este contenido { 
    altura: 2000px; 
  } 
  .G -footer- recipiente { 
    position: absolute; 
    la izquierda: 0 ; 
    parte inferior: 0 ; 
    anchura: 100% ; 
    caja -Shadow: 0 0 0 10px HSLA (0,6%, 58%, 0,6 ); 
    altura: 50px; 
    z -índice: 999 ; 
    fondo: verde claro; 
  }
 </ Style>

 

src / componentes / barra de pestañas / index.vue

<template> 
    <div class = "g-barra de pestañas"> 
        <clase de router-link = "g-barra de pestañas-punto" a = "/ home"> 
            <clase i = "iconfont icono de casa"> </ i> 
            <span >首页</ span> 
        </ enrutador-link> 
        clase <enrutador-link = "g-barra de pestañas-punto" a = "/ categoría"> 
            <clase i = "icono de categoría iconfont"> </ i> 
            <span>分类页</ span> 
        </ enrutador-link> 
        <clase de router-link = "g-barra de pestañas-punto" a = "/ carro"> 
            <clase i = "iconfont icono del carro"> </ i> 
            <span>购物车</ span>
        </ enrutador-link> 
        <clase de router-link = "g-barra de pestañas-punto" a = "/ personal"> 
        </ enrutador-link> 
            <i clase = "icono de iconfont personal"> </ i>
            <span>个人中心</ span>
    </ div> 
</ template> 

<script> 
de exportación por defecto { 
    nombre: "Tabbar" 
}
 </ script> 

<style lang = "SCSS" restringidos> 
    .g - barra de pestañas { 
        display: flexión; 
        anchura: 100% ; 
        altura: 50px; 
        Antecedentes: #fff; 

        Y - elemento { 
            flex: 1 ; 
            visualizar: flexión; 
            justificar - contenido: center; 
            alinee - artículos: center; 
            flex -dirección: columna; 
            color: #333 ; 
            fuente - size: 12px; 

            .iconfont { 
                margen - inferior: 4 píxeles; 
                fuente - Tamaño: 18px; 
            } 
        } 

    } 
    .Router -link- activa { 
        color: red; 
    }
 </ Style>

 

src / activos / SCSS / _icons.scss

@ font-face { 
  font-family : "iconfont" ; 
  src : url ('? ../ fuentes / iconfont.eot t = 1522237704791' ) ; / * IE9 * / 
  src : url (' ../ fuentes / iconfont.eot t = 1522237704791 # IEFix? ') Formato (' embedded-opentype '), / * IE6-IE8 * / 
  url (' datos: 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 (' ../ fuentes / iconfont.ttf? t = 1522237704791 ') formato (' TrueType '), / * Chrome, Firefox, Opera, Safari, Android, iOS 4.2 + * / 
  url (' ../ fuentes / iconfont ? .svg t = 1522237704791 # iconfont ') formato (' SVG '); / * IOS 4.1- * / 
} 

.iconfont { 
  font-family : "iconfont" importante ; 
  font-size : 16px ; 
  font-style : normal de ; 
  -webkit-font-suavizado : antialiased ; 
  -moz-osx-font-suavizado : escala de grises ; 
} 

.Icon-backtop: antes de {
  contenido : "\ e689" ; 
} 

.Icon personal: antes de { 
  contenido : "\ e610" ; 
} 

.Icon-scan: antes { 
  contenido : "\ E609" ; 
} 

.Icon-clara: antes de { 
  contenido : "\ E622" ; 
} 

.Icon-msg: antes { 
  contenido : "\ e7a8" ; 
} 

.Icon-categoría: antes { 
  contenido : "\ e7f9" ; 
} 

.Icon-Search: antes { 
  contenido :"\ e616" ; 
} 

.Icon-delete: antes { 
  contenido : "\ e6ac" ; 
} 

.Icon de servicio: antes { 
  contenido : "\ E643" ; 
} 

.Icon-ajuste: antes { 
  contenido : "\ e64c" ; 
} 

.Icon-back: antes { 
  contenido : "\ e60f" ; 
} 

.Icon-shop: antes { 
  contenido : "\ E624" ; 
} 

.Icon-cierre: antes { 
  contenido : "\ e60c" ;

.icon-más: antes de { 
  contenido : "\ e85c" ; 
} 

.Icon casa: antes { 
  contenido : "\ e699" ; 
} 

.Icon-cobro revertido: antes { 
  contenido : "\ e78c" ; 
} 

.Icon-carro: antes { 
  contenido : "\ E635" ; 
}

 

src / activos / SCSS / index.scss

@import 'iconsThe'; 

* { 
    margen : 0 ; 
    padding : 0 ; 
} 
HTML, cuerpo { 
    // debe proporcionar, de otro modo el contenido del efecto de rodadura no se pueden lograr 
    anchura : 100% ; 
    altura : 100% ; 
}