vue2.0 + vux （二）Footer組件

1.Footer組件

Footer.vue

<!-- 底部 footer -->
<template>
  <div>
    <tabbar>
      <!-- 綜合 -->
      <tabbar-item :link="{path:'/'}" selected>
        <img slot="icon" src="../assets/img/ic_nav_news_normal.png">
        <img slot="icon-active" src="../assets/img/ic_nav_news_actived.png">
        <span slot="label">綜合</span>
      </tabbar-item>
      <!-- 動彈 -->
      <tabbar-item :link="{path:'/'}">
        <img slot="icon" src="../assets/img/ic_nav_tweet_normal.png">
        <img slot="icon-active" src="../assets/img/ic_nav_tweet_actived.png">
        <span slot="label">動彈</span>
      </tabbar-item>
      <!-- 中間圖標 -->
      <tabbar-item :link="{path:'/'}">
        <img slot="icon" src="../assets/img/ic_nav_add_normal.png" height="40" width="40">
      </tabbar-item>
      <!-- 發現 -->
      <tabbar-item :link="{path:'/'}">
        <img slot="icon" src="../assets/img/ic_nav_discover_normal.png">
        <img slot="icon-active" src="../assets/img/ic_nav_discover_actived.png">
        <span slot="label">發現</span>
      </tabbar-item>
      <!-- 個人 -->
      <tabbar-item :link="{path:'/mySettings'}">
        <img slot="icon" src="../assets/img/ic_nav_my_normal.png">
        <img slot="icon-active" src="../assets/img/ic_nav_my_pressed.png">
        <span slot="label">個人</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem } from 'vux'

  export default {
    name: 'AppFooter',
    components: {
      Tabbar,
      TabbarItem
    },
    data(){
      return {
        index: 0
      }
    }
  }
</script>

 

2.頁面調用

App.vue

<template>
  <div id="app">
    <!-- 視圖層 -->
    <router-view></router-view>
    <!-- 底部選項卡 -->
    <app-footer></app-footer>
  </div>
</template>

<script>
  import AppFooter from './components/Footer'

  export default {
    components: {
      AppFooter
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';

  body {
    background-color: #fbf9fe;
    line-height: 1.2;
  }
</style>

 

3.效果圖