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.效果图