大家好，我給大家分享一下仿豆瓣app的教程。當然了，我們不是用原生去實現，而是用前端框架vuejs來實現豆瓣app。————第一次寫文章，寫得不好請見諒。

為什麼我們選擇豆瓣app 來做這樣一個教程？

是因為我很早就接觸豆瓣這個網站，我比較喜歡看豆瓣裡面電影和文章的點評。並且豆瓣提供了非常豐富的一個api介面供我們使用。也就是說我們可以不通過後端，直接通過前端ajax來獲取電影和圖書的資料，來組裝我們app。

我們可以看一下豆瓣app首頁是一個什麼樣子 gif

以上就是豆瓣app的一個截圖。

我們先來分析一下

首頁分為四個部分。第一個就是頂部的搜尋框。搜尋框下面就是一個banner圖切換。在下面就是一些熱點的文章列表。最底部就是一個tab切換。在這篇教程中，我們通過vue的元件來實現這樣一個首頁的佈局。

• • • • *

        建立豆瓣專案

我們可以通過官方vue-cli初始化專案,這裡我們採用webpack示例

vue init webpack douban

填寫專案描述，作者，安裝vue-router

? Project name douban
? Project description douban
? Author afei
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with
 
 Nightwatch? No

   vue-cli · Generated "douban".

   To get started:

     cd douban
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

初始化後，通過npm install安裝依賴

cd douban
npm install

執行專案,可以看到基於官方vue-cli的模版就建立好了

npm run dev

將所需要用的資源，拷貝到專案中，這裡我通過解壓豆瓣app獲得他的一些圖片素材，拷入到src/assets/images目錄裡。

css這裡我用到了normaliz.css

在src下，新建了一個pages目錄，存放每一個頁面元件，可以看一下我們的目錄

由於我們的首頁更改了位置，所以在router裡面的index.js需要更改為

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
  ]
})

每一個元件的css我們通過less來編寫，所有需要通過npm安裝less外掛

npm install less less-loader --save

使用less前處理器需要在頁面新增 lang='less'

<style scoped lang="less"></style>

第一個元件 tabbar

如何建立自定義元件tabbar，也就是豆瓣app底部的工具欄。這裡的結構我們參考了 mint-ui

這是我們將要實現的效果圖。

我們先來分析一下這個元件的結構。

這個元件分為兩部分：第一個是元件的外層容器，第二個是元件的子容器item，子元件裡面又分為圖片和文字組合。子元件有2個狀態，一個預設灰色的狀態，一個選中狀態，我們來實現一下這個元件的佈局。在index.vue裡面

template

<div class="m-tabbar">
  <a class="m-tabbar-item is-active">
    <span class="m-tabbar-item-icon">
       < img src="../assets/images/ic_tab_home_normal.png" alt="">
    </span> 
    <span class="m-tabbar-item-text">  
          首頁
    </span>
  </a> 
  <a class="m-tabbar-item">
    <span class="m-tabbar-item-icon">
       < img src="../assets/images/ic_tab_subject_normal.png" alt="">
    </span> 
    <span class="m-tabbar-item-text">  
          書影音
    </span>
  </a> 
  <a class="m-tabbar-item">
    <span class="m-tabbar-item-icon">
       < img src="../assets/images/ic_tab_status_normal.png" alt="">
    </span> 
    <span class="m-tabbar-item-text">  
          廣播
    </span>
  </a> 
  <a class="m-tabbar-item">
    <span class="m-tabbar-item-icon">
       < img src="../assets/images/ic_tab_group_normal.png" alt="">
    </span> 
    <span class="m-tabbar-item-text">  
          小組
    </span>
  </a> 
  <a class="m-tabbar-item">
    <span class="m-tabbar-item-icon">
       < img src="../assets/images/ic_tab_profile_normal.png" alt="">
    </span> 
    <span class="m-tabbar-item-text">  
          我的
    </span>
  </a> 
</div>

style

<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;
    
    .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: #42bd56;
          }
      }
  }
}
</style>

佈局大功告成~~~~

前面我們說的是，通過元件的方式來實現這個app。

如果像上面程式碼這樣的話肯定是不行的！既然我們大體佈局已經寫好了，現在就可以通過元件的方式來呼叫。當然我們還要改造一下程式碼。

先在components資料夾下面，新建兩個元件，通過這兩個元件來組合實現我們底部的tab元件：

一個是tabbar-item.vue，實現子元件的item項，

tabbar-item.vue

<template>
    <a class="m-tabbar-item" >
        <span class="m-tabbar-item-icon"><slot name="icon-normal"></slot></span>
        <span class="m-tabbar-item-text"><slot></slot></span>
    </a>
</template>

<style lang="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: #42bd56;
        }
    }
}
</style>

一個是tabbar.vue，實現tab的外層容器，

tabbar.vue

<template>
    <div class="m-tabbar">
       <slot></slot>
    </div>
</template>
<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>

在Index.vue中組合這兩個元件，實現tab元件效果

<template>
  <div>
    <m-tabbar>
      <m-tabbar-item id='tab1'>
        < img src="../assets/images/ic_tab_home_normal.png" alt="" slot="icon-normal"> 
        首頁
      </m-tabbar-item>
      <m-tabbar-item id='tab2'>
        < img src="../assets/images/ic_tab_subject_normal.png" alt="" slot="icon-normal"> 
        書影音
      </m-tabbar-item>
      <m-tabbar-item id='tab3'>
        < img src="../assets/images/ic_tab_status_normal.png" alt="" slot="icon-normal"> 
        廣播
      </m-tabbar-item>
      <m-tabbar-item id='tab4'>
        ![](../assets/images/ic_tab_group_normal.png) 
        小組
      </m-tabbar-item>
       <m-tabbar-item id='tab5'>
        < img src="../assets/images/ic_tab_profile_normal.png" alt="" slot="icon-normal"> 
        我的
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
  import mTabbar from '../components/tabbar'
  import mTabbarItem from '../components/tabbar-item'
  export default {
    name: 'index',
    components: {
      mTabbar,
      mTabbarItem
    }
  }
</script>

完成的效果。

• • • • *

光有一個死的介面，沒有點選切換的效果怎麼能行？

以下我們通過vue使用自定義事件的表單輸入元件來實現點選切換的效果。

• • • • *

先給Index.vue裡面的tab元件加上v-model 來進行資料雙向繫結，通過select來達到選擇item，在item裡面再新增一個選中的active圖片

<template>
  <div>
    測試
    <m-tabbar v-model="select">
      <m-tabbar-item id='tab1'>
        < 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"> 
        首頁
      </m-tabbar-item>
      <m-tabbar-item id='tab2'>
        < 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"> 
        書影音
      </m-tabbar-item>
      <m-tabbar-item id='tab3'>
        < 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='tab4'>
        < 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-normal"> 
        小組
      </m-tabbar-item>
       <m-tabbar-item id='tab5'>
        < 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-normal"> 
        我的
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

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

tabbar.vue裡面通過props來傳遞資料vaule

<template>
    <div class="m-tabbar">
       <slot></slot>
    </div>
</template>
<script>
    import mTabbarItem from './tabbar-item';
    export default {
        props: ['value']
    }
</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>

tabbar-item.vue元件：根據父元件的value和當前元件的id判斷是否為選中狀態,通過 $parent.$emit('input',id) - 觸發父元件的自定義事件，新增選中的圖片，根據isActive來顯示隱藏

<template>
    <a class="m-tabbar-item" :class="{'is-active':isActive}" @click="$parent.$emit('input',id)">
        <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'],
        computed: {
           isActive(){
               if(this.$parent.value===this.id){
                   return true;
               }
           }
        }
    }
</script>
<style lang="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: #42bd56;
        }
    }
}
</style>

大功告成，tabbar元件就完成了

感謝餓了麼團隊給我們帶來了這麼好的ui元件！

下載安裝

npm install
npm run dev