接上篇
为什么导航不使用fixed定位：
首先解释下，手机端的头部导航和底部导航，位置一般都是固定不变的
但是我们这里不使用固定定位fixed，因为它在手机端的兼容性并不好
我们可以设置总容器为relative，并且溢出隐藏，然后设置头部导航和底部导航absolute
页面中除去头部和底部的部分作为滚动区域
在vue中，组件一般不包含位置信息，这样不利用组件复用。
位置信息一般由父组件和页面组件来提供
修改app.vue
我要评论<template>
<div id="app" class="g-container">
<div class="g-view-container">
<router-view></router-view>
</div>
<div class="g-footer-container"></div>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
新建_containers.scss（书写app.vue中对应的全局样式）
@import "mixins";
.g-container{
position: relative;
width:100%;
height:100%;
max-width:640px;
min-width:320px;
margin:0 auto;
overflow:hidden;
}
.g-view-container{
height:100%;
padding-bottom:$tabbar-height; // 注意移动端在reset文件里要设置box-sizing:border-box
}
.g-footer-container{
position:absolute;
left:0;
bottom:0;
width:100%;
box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6);
z-index:$tabbar-z-index;
}
_base.scss中添加html,body的溢出隐藏
补充一下，因为我开了格式检验，然后由于个人代码风格的原因，vue老是因为一些空格或者空白或者空行的问题报一大堆错误
真的烦死了，虽然感觉不太好，但是我还是决定把它关掉
修改config--index.js
将useeslint的值改成false就好了
接下来开发底部导航条
在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:"ctabbar"
}
</script>
// lang="scss"指定是scss，scoped只在该组件中有效
<style lang="scss" scoped>
@import "~assets/scss/mixins";//必须加波浪线才不会报错，要问理由我也不清楚
.router-link-active{
color:$link-active-color;
}
</style>
新建_tabbar.scss
@import "mixins";
.g-tabbar{
display:flex;
width:100%;
height:$tabbar-height;
background:#fff;
&-item{
flex:1;
@include flex-center(column);
.iconfont{
margin-bottom:4px;
font-size:$icon-font-size;
}
}
}
修改app.vue
效果图
vue-router
接下来创建页面组件，使用路由来跳转
首先在pages页面下创建6个文件夹，命名分别是：home/category/cart/personal/search/product
每个文件夹下都有对应的index.vue，代码如下：
红框内根据不同页面进行调整
修改路由index.js
import vue from 'vue'
import router from 'vue-router'
//引入页面组件，这里不直接引入，而是使用路由的懒加载
// import home from 'pages/home';
// import category from 'pages/category';
// import cart from 'pages/cart';
// import personal from 'pages/personal';
// import search from 'pages/search';
// import product from 'pages/product';
vue.use(router)
//使用es6语法时，一般默认用const，只有当变量后面会变化时，使用let
//这里定义的都是一级路由
const routes=[
{
name:'home',
path:'/home',
component:()=>import('pages/home'), //懒加载，对效率优化
children:[//二级路由
{
name:'home-product',
path:'product/:id',//一定不能加/
component:()=>import('pages/product') //懒加载，对效率优化
}
]
},
{
name:'category',
path:'/category',
component:()=>import('pages/category') //懒加载，对效率优化
},
{
name:'cart',
path:'/cart',
component:()=>import('pages/cart') //懒加载，对效率优化
},
{
name:'personal',
path:'/personal',
component:()=>import('pages/personal') //懒加载，对效率优化
},
{
name:'search',
path:'/search',
component:()=>import('pages/search') //懒加载，对效率优化
},
{//url错误时默认返回home页
path:'*',
redirect:'/home'
}
]
export default new router({
routes
})
由于home中存在二级路由，需要定义链接
因此修改home目录中的index.vue
浏览器访问测试
如对本文有疑问， 点击进行留言回复！！
Agora 开源 | 一个 Demo，帮你快速实现社交直播四大场景
vuejs （2）- Vue 生命周期 和 VueJS ajax
网友评论