Vant UI框架-Tabbar实现底部菜单

效果图
Vant UI框架-Tabbar实现底部菜单

实现功能

• 自定义图标
• 路由改变时没有mounted，需要watch监控路由的改变，实现当前页面图标的高亮选中效果
• 直接地址栏输入指定页面地址时，实现当前页面图标的高亮选中效果

基础用法

<template>
  <div id="app">
    <van-tabbar v-model="active" active-color="#07c160">
      <van-tabbar-item to="/">
        <span>首页</span>
        <img
          slot="icon" slot-scope="props"
          :src="props.active ? icon.active : icon.normal"
        >
      </van-tabbar-item>
      <van-tabbar-item to="/cate">
        <span>分类</span>
        <img
          slot="icon" slot-scope="props"
          :src="props.active ? cate.active : cate.normal"
        >
      </van-tabbar-item>
      <van-tabbar-item
        to="/cart"
        icon="shopping-cart" info="3">
        购物车
      </van-tabbar-item>
      <van-tabbar-item
        to="/mine"
        icon="contact">
        我的
      </van-tabbar-item>
    </van-tabbar>
    <router-view/>
  </div>
</template>

js部分

<script>
import { Tabbar,TabbarItem } from 'vant';
export default {
  name: 'App',
  components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem
  },
  data() {
    return {
      active: 0,
      tabbar:["","cate","cart","mine"],
      icon: {
        normal: require('./assets/my-1.png'),
        active: require('./assets/my-7.png')
      },
      cate: {
        normal: require('./assets/my-1.png'),
        active: require('./assets/my-7.png')
      }
    }
  },
  mounted(){
      this.tabbarActive();
  },
  watch: {
    '$route' (to, from) {// 对路由变化作出响应
      this.tabbarActive();
    }
  },
  methods: {
    tabbarActive(){
      const href = window.location.href.split("#/")[1];
      for(let i=0;i<4;i++){
        if(href==this.tabbar[i]){
          this.active=i;
        }
      }
    },
  },
}
</script>