为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 2-vuejs2.0实战：仿豆瓣app项目，创建组件h...

2-vuejs2.0实战：仿豆瓣app项目，创建组件header,tabbar路由跳转

标签：
Html5 WebApp Vue.js

上一章有童鞋提到为什么不通过路由的方式来跳转？其实我想说的是，这个分享才刚刚开始，大家不要着急！这一章节我们将带大家完成，创建header组件，以及tabbar的路由跳转。

创建header组件

我们先来分析一下豆瓣app:

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

首页的header背景是绿色的，并且有一个搜索框，其他页面都是灰色的背景，在header的左侧，是一个返回按钮，右侧，有分享或者评论等图标，中间就是header的标题。我们先不做有搜索框的header。

我们先在components文件中创建一个header.vue文件，并且在less文件里新建一个颜色变量var.less（统一管理app的颜色，保持统一），我们先将有其他元素的组件的大致框架，以及样式先写出来。然后在index.vue里面引入。

//var.less

//APP默认颜色
@defaultColor:#42bd56;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);

//tabbar
@tabbarActiveColor: @defaultColor;
//header.vue
<template>
    <header class="m-header is-bg is-fixed" >
        <div class="m-header-button is-left">
            <a href="javascript:;">
< img class="m-icon-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../assets/images/ic_bar_back_white.png"/>返回</a>
        </div>

        <h1 class="m-header-title">豆瓣app</h1>

        <div class="m-header-button is-right">
            <a href="javascript:;">分享</a>
        </div>

    </header>
</template>
<script>

</script>
<style lang="less">
/*导入颜色变量*/
@import "../assets/less/var.less";
.m-header{
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 10px;
    background: #fff;
    color: @headerDefaultColor;
    border-bottom:1px solid #eee;
    a{
        color: @headerDefaultColor;
    }
    .m-header-button{
        width: 70px;
        align-items:stretch;
        &.is-left{
            text-align: left;
        }
        &.is-right{
            text-align: right;
        }
        .m-icon-img{
            width: 20px;
            height: 20px;
        }
        .margin-right-10{
            margin-right: 10px;
        }
    }
    .m-header-title{
        flex: 1;
        text-align: center;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    &.is-bg{
        background:@headerBg;
        color: #fff;
        a{color: #fff;}
        .m-header-title{
            color: #fff;
        }
    }
    &.is-fixed{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9;
    }
}
</style>

下图就是我们完成后的截图：

Paste_Image.png

is-bg:是否显示背景色，默认是绿色
is-fixed:是否显示在顶部

去掉is-bg,显示白色背景的header组件

Paste_Image.png

由于上一章tarbar组件没有用到var.less，那么在这里也统一改一下

//tabbar.vue

<style lang="less">
@import "../assets/less/var.less";
.m-tabbar-item{
    flex: 1;
    text-align: center;
    .m-tabbar-item-icon{
        display: block;
        padding-top: 2px;
        img{
            width: 28px;
            height: 28px;
        }

    }
    .m-tabbar-item-text{
        display: block;
        font-size: 10px;
        color:#949494;
    }
    &.is-active{
        .m-tabbar-item-text{
            color: @tabbarActiveColor;
        }
    }
}
</style>

如果我们需要更换整个app的颜色，只需要在var.less更改相应的变量就可以了。例如：

改成黄色

//var.less

//APP默认颜色
@defaultColor:#f6c210;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);

//tabbar
@tabbarActiveColor: @defaultColor;

Paste_Image.png

改成红色

//var.less

//APP默认颜色
@defaultColor:#ff0000;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);

//tabbar
@tabbarActiveColor: @defaultColor;

Paste_Image.png

是不是非常的方便！！！

接下来我们就来把header改造成可以配置属性的组件，可以传递props(title,fixed,bg),

<template>
    <header class="m-header" :class="{'is-bg':bg,'is-fixed':fixed}">
        <div class="m-header-button is-left">
            <slot name="left"></slot>
        </div>

        <h1 class="m-header-title" v-text="title"></h1>

        <div class="m-header-button is-right">
            <slot name="right"></slot>
        </div>

    </header>
</template>
<script>
   export default{
    props:{
        title:{
            type:String,
            default:''
        },
        bg:{
            type:Boolean,
            default:false
        },
        fixed:{
            type:Boolean,
            default:false
        }
    }
   }
</script>
<style lang="less">
/*导入颜色变量*/
@import "../assets/less/var.less";
.m-header{
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 10px;
    background: #fff;
    color: @headerDefaultColor;
    border-bottom:1px solid #eee;
    a{
        color: @headerDefaultColor;
    }
    .m-header-button{
        width: 70px;
        align-items:stretch;
        &.is-left{
            text-align: left;
        }
        &.is-right{
            text-align: right;
        }
        .m-icon-img{
            width: 20px;
            height: 20px;
        }
        .margin-right-10{
            margin-right: 10px;
        }
    }
    .m-header-title{
        flex: 1;
        text-align: center;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    &.is-bg{
        background:@headerBg;
        color: #fff;
        a{color: #fff;}
        .m-header-title{
            color: #fff;
        }
    }
    &.is-fixed{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9;
    }
}
</style>

大功告成！我们就来调用吧！

<m-header title="豆瓣app" :bg="true">
            <a href="javascript:;" slot="left">< img class="m-icon-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../assets/images/ic_bar_back_white.png"/>返回</a>
            <a href="javascript:;" slot="right">分享</a>
    </m-header>
    <m-header title="豆瓣app" :bg="true">
        <a href="javascript:;" slot="left">< img class="m-icon-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../assets/images/ic_bar_back_white.png"/>返回</a>
            <a href="javascript:;" slot="right">分享</a>
    </m-header>
    <m-header title="豆瓣app" fixed>
            <a href="javascript:;" slot="left">< img class="m-icon-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../assets/images/ic_bar_back_green.png"/>返回</a>
            <a href="javascript:;" slot="right">< img class="m-icon-img margin-right-10" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../assets/images/ic_actionbar_search_icon.png"/></a>
            <a href="javascript:;" slot="right">< img class="m-icon-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../assets/images/ic_chat_green.png"/></a>
    </m-header>

改造tabbar,完成路由跳转

上一章我们只完成了tabbar点击改变颜色，那么如何通过路由来进行跳转页面呢？

我们先新建底部tabbar的路由页面，豆瓣app这个项目说大不大说小也不小，为了规划好结构，我们将每一个路由都新建一个文件夹，然后在文件夹里面，新建这个页面。在每个页面都添加不同的header组件，如图所示：

Paste_Image.png

然后在每一个路由页面里面，我们都添加上header组件。
拥有header组件的示例：

Mine.vue

<template>
  <div>
        <m-header title="我的" fixed>
            <a href="javascript:;" slot="right">< img class="m-icon-img margin-right-10" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../assets/images/ic_actionbar_search_icon.png"/></a>
            <a href="javascript:;" slot="right">< img class="m-icon-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../assets/images/ic_chat_green.png"/></a>
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

路由的页面完成后我们就需要在router文件夹下面的index.js里面，来配置页面路由。如下：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/Index/Index'
import Broadcast from '../pages/Broadcast/Broadcast'
import AudioBook from '../pages/AudioBook/AudioBook'
import Group from '../pages/Group/Group'
import Mine from '../pages/Mine/Mine'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/broadcast',
      name: 'Broadcast',
      component: Broadcast
    },
    {
      path: '/audioBook',
      name: 'AudioBook',
      component: AudioBook
    },
    {
      path: '/group',
      name: 'Group',
      component: Group
    },
    {
      path: '/mine',
      name: 'Mine',
      component: Mine
    },
    {
      path: '/Index',
      redirect: '/'
    },
    {
      path: '*',
      redirect: '/'
    },
  ]
})

我们可以在浏览器输入配置的这个路由地址来访问这个页面是否存在。如果不存在详细检查路径是否正确。

接下来我们就来改造tabbar实现路由跳转。我们先将index.vue里的tabbar组件移入到app.vue里面，并且将每一个id改成对应的路由，添加一个isRouter属性，来判断当前item是否是路由跳转。然后在tabbar-item.vue里我们在props添加isRouter，click点击跳转的方法放到methods里面，并且根据传递的isRouter判断当前是否通过路由跳转

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <m-tabbar v-model="select">
     <m-tabbar-item id='Index' isRouter>
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/images/ic_tab_home_normal.png" alt="" slot="icon-normal"> 
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/images/ic_tab_home_active.png" alt="" slot="icon-active"> 
        首页
      </m-tabbar-item>
      <m-tabbar-item id='AudioBook' isRouter>
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/images/ic_tab_subject_normal.png" alt="" slot="icon-normal"> 
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/images/ic_tab_subject_active.png" alt="" slot="icon-active"> 
        书影音
      </m-tabbar-item>
      <m-tabbar-item id='Broadcast' isRouter>
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/images/ic_tab_status_normal.png" alt="" slot="icon-normal"> 
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/images/ic_tab_status_active.png" alt="" slot="icon-active"> 
        广播
      </m-tabbar-item>
      <m-tabbar-item id='Group' isRouter>
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/images/ic_tab_group_normal.png" alt="" slot="icon-normal"> 
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/images/ic_tab_group_active.png" alt="" slot="icon-active"> 
        小组
      </m-tabbar-item>
       <m-tabbar-item id='Mine' isRouter>
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/images/ic_tab_profile_normal.png" alt="" slot="icon-normal"> 
        < img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/images/ic_tab_profile_active.png" alt="" slot="icon-active"> 
        我的
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
import mTabbar from './components/tabbar'
import mTabbarItem from './components/tabbar-item'
export default {
  name: 'app',
  components:{
    mTabbar,
    mTabbarItem
  },
  data() {
      return {
        select:"Index"
      }
    }
}
</script>

<style>

</style>

tabbar-item.vue


<template>
    <a class="m-tabbar-item" :class="{'is-active':isActive}" @click="goToRouter">
        <span class="m-tabbar-item-icon" v-show="!isActive"><slot name="icon-normal"></slot></span>
        <span class="m-tabbar-item-icon" v-show="isActive"><slot name="icon-active"></slot></span>
        <span class="m-tabbar-item-text"><slot></slot></span>
    </a>
</template>
<script>
    export default{
        props: {
            id:{
                type:String
            },
            isRouter:{
                type:Boolean,
                default:false
            }
        },
        computed: {
           isActive(){
               if(this.$parent.value===this.id){
                   return true;
               }
           }
        },
        methods:{
            goToRouter(){
                this.$parent.$emit('input',this.id)
                        //判断是否为路由跳转
                if(this.isRouter){
                                //根据id跳转到对应的路由页面
                    this.$router.push(this.id)
                }
            }
        }
    }
</script>
<style lang="less">
@import "../assets/less/var.less";
.m-tabbar-item{
    flex: 1;
    text-align: center;
    .m-tabbar-item-icon{
        display: block;
        padding-top: 2px;
        img{
            width: 28px;
            height: 28px;
        }

    }
    .m-tabbar-item-text{
        display: block;
        font-size: 10px;
        color:#949494;
    }
    &.is-active{
        .m-tabbar-item-text{
            color: @tabbarActiveColor;
        }
    }
}
</style>

路由跳转就完成了，如图：

录像1_转.gif

git地址：
https://github.com/MrMoveon/doubanApp

第二章源码
链接: http://pan.baidu.com/s/1kUElWX5 密码: sp4i

点击查看更多内容
发表于 2017.02.26 19:14， 共 4717 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
5人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

Mr慕风

Web前端工程师
手记
篇
粉丝
9
获赞与收藏
104

关注作者，订阅最新文章

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消