vue开发之路-自定义导航菜单Tabbar

自定义导航菜单实现效果展示

自定义导航菜单实现效果图

目录结构

1. assets 放置图片素材
2. components 放置自定义组件
3. app.vue vue入口文件
   

代码实现

在components组件文件夹下新建tabbar文件夹，用来存储自定义的Tabbar组件
在新建的tabbar文件夹下新建Item.vue和Tabbar.vue

Item.vue文件内容

<template>
  <div class="itemWarp flex_mid" @click='changePage'>
    <span v-show='!change'>
      <slot name='normalImg'></slot>
    </span>
    <span v-show='change'>
      <slot name='activeImg'></slot>
    </span>
    <span v-text='txt'></span>
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'Item',
  props: {
    txt: {
      type: String
    },
    page: {
      type: String
    },
    sel: {
      type: String
    }
  },
  computed: {
    change: function () {
      if (this.sel === this.page) {
        return true
      }
      return false
    }
  },
  methods: {
    changePage: function () {
      // 点击跳转对应的页面
      this.$router.push('/' + this.page)
      this.$emit('change', this.page)
    }
  }
}
</script>
<style type="text/css">
  .itemWarp {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .itemWarp span {
    font-size: 12px;
  }
</style>

Tabbar.vue 文件内容

<template>
  <div class="tabberWarp">
    <div class="warp">
      <Item :txt='item.txt' :page='item.page' @change='getVal' v-for='item in tabbarList' :sel='selected' v-bind:key="item.txt">

        <img :src="item.normalImg" slot='normalImg'>
        <img :src="item.activeImg" slot='activeImg'>
      </Item>
    </div>
  </div>
</template>
<script type="text/javascript">
import Item from './Item.vue'
export default {
  components: {
    Item
  },
  data: function () {
    return {
      // 默认展示哪一个菜单
      selected: '',
      tabbarList: [{
        txt: '首页',
        page: '',
        normalImg: require('../../assets/image/tabbar/home.png'),
        activeImg: require('../../assets/image/tabbar/home_active.png')

      },
      {
        txt: '微咨询',
        page: 'consultation',
        normalImg: require('../../assets/image/tabbar/consultation.png'),
        activeImg: require('../../assets/image/tabbar/consultation_active.png')
      },
      {
        txt: '个人中心',
        page: 'person',
        normalImg: require('../../assets/image/tabbar/person.png'),
        activeImg: require('../../assets/image/tabbar/person_active.png')
      },
      {
        txt: '设置',
        page: 'setup',
        normalImg: require('../../assets/image/tabbar/setup.png'),
        activeImg: require('../../assets/image/tabbar/setup_active.png')
      }
      ]
    }
  },
  methods: {
    getVal: function (res) {
      this.selected = res
    }
  }
}
</script>
<style type="text/css">
  .warp {
    width: 100%;
    border-top: 1px solid #eee;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 0;
  }

  .warp img {
    width: 20px;
    height: 20px;
  }

  .tabberWarp img {
    margin-top: 10px;
    margin-bottom: 5px;

  }

  .tabberWarp {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 5px;
    background: #fff;
  }
</style>

在App.vue中引入自定义的Tabbar组件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <!-- 引入底部导航组件 -->
    <Tabbar></Tabbar>

  </div>
</template>

<script>

// 引入底部导航组件
import Tabbar from './components/tabbar/tabbar'
export default {
  name: 'App',
  created: function () {
    this.$router.push('/')
  },
  components: {
    Tabbar
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue 实现Tabbar底部导航菜单示例代码下载地址

https://download.csdn.net/download/wen710516644/12039740