站长资源网络编程
vue开发移动端底部导航条功能
简介效果图 src/app.vue
头部导航
效果图
src/app.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>
src/components/tabbar/index.vue
<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>
src/assets/scss/_icons.scss
@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";
}
src/assets/scss/index.scss
@import 'icons';
*{
margin:0;
padding:0;
}
html,body{
// 必须设置，否则内容滚动效果无法实现
width:100%;
height:100%;
}
总结