2-vuejs2.0實(shí)戰(zhàn)：仿豆瓣app項(xiàng)目摔蓝，創(chuàng)建組件header,tabbar路由跳轉(zhuǎn)

上一章有童鞋提到為什么不通過(guò)路由的方式來(lái)跳轉(zhuǎn)赂苗？其實(shí)我想說(shuō)的是，這個(gè)分享才剛剛開(kāi)始贮尉，大家不要著急拌滋！這一章節(jié)我們將帶大家完成，創(chuàng)建header組件猜谚，以及tabbar的路由跳轉(zhuǎn)败砂。

vue專題目錄：
1-vuejs2.0實(shí)戰(zhàn)：仿豆瓣app項(xiàng)目赌渣，創(chuàng)建自定義組件tabbar

創(chuàng)建header組件

我們先來(lái)分析一下豆瓣app:

Paste_Image.png

首頁(yè)的header背景是綠色的，并且有一個(gè)搜索框昌犹，其他頁(yè)面都是灰色的背景坚芜，在header的左側(cè)，是一個(gè)返回按鈕斜姥，右側(cè)鸿竖，有分享或者評(píng)論等圖標(biāo)，中間就是header的標(biāo)題疾渴。我們先不做有搜索框的header千贯。

我們先在components文件中創(chuàng)建一個(gè)header.vue文件屯仗，并且在less文件里新建一個(gè)顏色變量var.less（統(tǒng)一管理app的顏色搞坝，保持統(tǒng)一），我們先將有其他元素的組件的大致框架魁袜，以及樣式先寫(xiě)出來(lái)桩撮。然后在index.vue里面引入。

//var.less

//APP默認(rèn)顏色
@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" src="../../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">
/*導(dǎo)入顏色變量*/
@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:是否顯示背景色峰弹，默認(rèn)是綠色
is-fixed:是否顯示在頂部

去掉is-bg,顯示白色背景的header組件

Paste_Image.png

由于上一章tarbar組件沒(méi)有用到var.less店量，那么在這里也統(tǒng)一改一下

//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>

如果我們需要更換整個(gè)app的顏色，只需要在var.less更改相應(yīng)的變量就可以了鞠呈。例如：

改成黃色

//var.less

//APP默認(rèn)顏色
@defaultColor:#f6c210;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);

//tabbar
@tabbarActiveColor: @defaultColor;

Paste_Image.png

改成紅色

//var.less

//APP默認(rèn)顏色
@defaultColor:#ff0000;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);

//tabbar
@tabbarActiveColor: @defaultColor;

Paste_Image.png

是不是非常的方便Ｈ谑Α！蚁吝！

接下來(lái)我們就來(lái)把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">
/*導(dǎo)入顏色變量*/
@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>

大功告成！我們就來(lái)調(diào)用吧窘茁！

<m-header title="豆瓣app" :bg="true">
            <a href="javascript:;" slot="left">< img class="m-icon-img" src="../../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" src="../../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" src="../../assets/images/ic_bar_back_green.png"/>返回</a>
            <a href="javascript:;" slot="right">< img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/></a>
            <a href="javascript:;" slot="right">< img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/></a>
    </m-header>

改造tabbar,完成路由跳轉(zhuǎn)

上一章我們只完成了tabbar點(diǎn)擊改變顏色怀伦，那么如何通過(guò)路由來(lái)進(jìn)行跳轉(zhuǎn)頁(yè)面呢？

我們先新建底部tabbar的路由頁(yè)面山林，豆瓣app這個(gè)項(xiàng)目說(shuō)大不大說(shuō)小也不小房待，為了規(guī)劃好結(jié)構(gòu)，我們將每一個(gè)路由都新建一個(gè)文件夾驼抹，然后在文件夾里面桑孩，新建這個(gè)頁(yè)面。在每個(gè)頁(yè)面都添加不同的header組件框冀，如圖所示：

Paste_Image.png

然后在每一個(gè)路由頁(yè)面里面洼怔，我們都添加上header組件。
擁有header組件的示例：

Mine.vue

<template>
  <div>
        <m-header title="我的" fixed>
            <a href="javascript:;" slot="right">< img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/></a>
            <a href="javascript:;" slot="right">< img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/></a>
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'
  
  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

路由的頁(yè)面完成后我們就需要在router文件夾下面的index.js里面左驾，來(lái)配置頁(yè)面路由镣隶。如下：

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: '/'
    },
  ]
})

我們可以在瀏覽器輸入配置的這個(gè)路由地址來(lái)訪問(wèn)這個(gè)頁(yè)面是否存在极谊。如果不存在詳細(xì)檢查路徑是否正確。

接下來(lái)我們就來(lái)改造tabbar實(shí)現(xiàn)路由跳轉(zhuǎn)安岂。我們先將index.vue里的tabbar組件移入到app.vue里面轻猖，并且將每一個(gè)id改成對(duì)應(yīng)的路由，添加一個(gè)isRouter屬性域那，來(lái)判斷當(dāng)前item是否是路由跳轉(zhuǎn)咙边。然后在tabbar-item.vue里我們?cè)趐rops添加isRouter，click點(diǎn)擊跳轉(zhuǎn)的方法放到methods里面次员，并且根據(jù)傳遞的isRouter判斷當(dāng)前是否通過(guò)路由跳轉(zhuǎn)

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <m-tabbar v-model="select">
     <m-tabbar-item id='Index' isRouter>
        < img src="./assets/images/ic_tab_home_normal.png" alt="" slot="icon-normal"> 
        < img src="./assets/images/ic_tab_home_active.png" alt="" slot="icon-active"> 
        首頁(yè)
      </m-tabbar-item>
      <m-tabbar-item id='AudioBook' isRouter>
        < img src="./assets/images/ic_tab_subject_normal.png" alt="" slot="icon-normal"> 
        < img src="./assets/images/ic_tab_subject_active.png" alt="" slot="icon-active"> 
        書(shū)影音
      </m-tabbar-item>
      <m-tabbar-item id='Broadcast' isRouter>
        < img src="./assets/images/ic_tab_status_normal.png" alt="" slot="icon-normal"> 
        < img src="./assets/images/ic_tab_status_active.png" alt="" slot="icon-active"> 
        廣播
      </m-tabbar-item>
      <m-tabbar-item id='Group' isRouter>
        < img src="./assets/images/ic_tab_group_normal.png" alt="" slot="icon-normal"> 
        < img src="./assets/images/ic_tab_group_active.png" alt="" slot="icon-active"> 
        小組
      </m-tabbar-item>
       <m-tabbar-item id='Mine' isRouter>
        < img src="./assets/images/ic_tab_profile_normal.png" alt="" slot="icon-normal"> 
        < img src="./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)
                        //判斷是否為路由跳轉(zhuǎn)
                if(this.isRouter){
                                //根據(jù)id跳轉(zhuǎn)到對(duì)應(yīng)的路由頁(yè)面
                    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>

tabbar.vue

通過(guò)計(jì)算返回當(dāng)前路由的值

<template>
    <div class="m-tabbar">
       <slot></slot>
    </div>
</template>
<script>
    import mTabbarItem from './tabbar-item';
    export default {
        props: ['value'],
        computed:{
            value(){
                return this.$route.matched[0].name
            }
        }
    }
</script>
<style lang="less">
.m-tabbar{
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    height: 50px;
    background: #fff;
    border-top: 1px solid #e4e4e4;
}
</style>

路由跳轉(zhuǎn)就完成了败许，如圖：

錄像1_轉(zhuǎn).gif

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

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

vue專題目錄：
1-vuejs2.0實(shí)戰(zhàn)：仿豆瓣app項(xiàng)目，創(chuàng)建自定義組件tabbar

下一章預(yù)告：創(chuàng)建swipe組件
請(qǐng)關(guān)注作者淑蔚，能及時(shí)看到分享的vue教程

最后編輯于：2017.12.06 01:08:09

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末市殷，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子刹衫，更是在濱河造成了極大的恐慌醋寝，老刑警劉巖，帶你破解...
沈念sama閱讀 216,651評(píng)論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件带迟，死亡現(xiàn)場(chǎng)離奇詭異音羞，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)仓犬，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,468評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)嗅绰，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人搀继，你說(shuō)我怎么就攤上這事窘面。” “怎么了律歼？”我有些...
開(kāi)封第一講書(shū)人閱讀 162,931評(píng)論 0贊 353
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵民镜，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我险毁，道長(zhǎng)制圈，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,218評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任畔况，我火速辦了婚禮鲸鹦，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘跷跪。我一直安慰自己馋嗜，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,234評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布吵瞻。她就那樣靜靜地躺著葛菇，像睡著了一般甘磨。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上眯停，一...
開(kāi)封第一講書(shū)人閱讀 51,198評(píng)論 1贊 299
城市分裂傳說(shuō)
那天济舆，我揣著相機(jī)與錄音，去河邊找鬼莺债。笑死滋觉，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的齐邦。我是一名探鬼主播椎侠，決...
沈念sama閱讀 40,084評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼措拇！你這毒婦竟也來(lái)了我纪？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 38,926評(píng)論 0贊 274
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤儡羔，失蹤者是張志新（化名）和其女友劉穎宣羊，沒(méi)想到半個(gè)月后璧诵，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體汰蜘，經(jīng)...
沈念sama閱讀 45,341評(píng)論 1贊 311
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,563評(píng)論 2贊 333
?白月光啟示錄
正文我和宋清朗相戀三年之宿，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了族操。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,731評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡比被，死狀恐怖色难，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情等缀，我是刑警寧澤枷莉，帶...
沈念sama閱讀 35,430評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站尺迂，受9級(jí)特大地震影響笤妙，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜噪裕，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,036評(píng)論 3贊 326
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一蹲盘、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧膳音，春花似錦召衔、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,676評(píng)論 0贊 22
一樁弒父案苍凛，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)趣席。三九已至，卻和暖如春醇蝴，著一層夾襖步出監(jiān)牢的瞬間吩坝，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 32,829評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工哑蔫，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留钉寝，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,743評(píng)論 2贊 368
代替公主和親
正文我出身青樓闸迷，卻偏偏與公主長(zhǎng)得像售淡，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子返吻，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,629評(píng)論 2贊 354

2-vuejs2.0實(shí)戰(zhàn)：仿豆瓣app項(xiàng)目，創(chuàng)建組件header,tabbar路由跳轉(zhuǎn)

2-vuejs2.0實(shí)戰(zhàn)：仿豆瓣app項(xiàng)目摔蓝，創(chuàng)建組件header,tabbar路由跳轉(zhuǎn)

創(chuàng)建header組件

改造tabbar,完成路由跳轉(zhuǎn)

Mine.vue

App.vue

tabbar-item.vue

tabbar.vue

推薦閱讀更多精彩內(nèi)容