vue组件tabbar使用方法详解

在做项目时，实现tab页时有tabbar，其他页面没有，则可以如下操作：

• 在App.vue中

<template>
  <div id="app">
     <transition :name="viewTransition">
      <router-view class="router-view" />
    </transition>
     <Tabbar v-if="tabbarShow"></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/pages/common/tabbar.vue'
export default {
  name: 'App',
  components: {
    Tabbar
  },
  // 监听,当路由发生变化的时候执行
  watch:{
    $route(to,from){
      //判断是否显示tabbar
      if(to.path == '/' || to.path == '/index' || to.path == '/mine'){
        this.$store.commit('updateTabbarShow',true);
      }else{
        this.$store.commit('updateTabbarShow',false);
      }

    }
 },
  computed: {
    tabbarShow(){
      return this.$store.getters.getTabbarShow
    }
  },
}
</script>

<style lang="less">

</style>

• tabbar.vue文件为

<template>
  <div class="tabbar">
      <tabbar>
        <tabbar-item selected link="/index">
          <img slot="icon" src="../../assets/images/icon.png">
          <img slot="icon-active" src="../../assets/images/active-icon.png">
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item>
          <img slot="icon" src="../../assets/images/icon.png">
          <img slot="icon-active" src="../../assets/images/active-icon.png">
          <span slot="label">开庄</span>
        </tabbar-item>
        <tabbar-item >
          <img slot="icon" src="../../assets/images/icon.png">
          <img slot="icon-active" src="../../assets/images/active-icon.png">
          <span slot="label">我的投注</span>
        </tabbar-item>
        <tabbar-item link="/mine">
          <img slot="icon" src="../../assets/images/icon.png">
          <img slot="icon-active" src="../../assets/images/active-icon.png">
          <span slot="label">我的</span>
        </tabbar-item>
      </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
export default {
  components: {
    Tabbar,
    TabbarItem
  },
  data(){
    return {
    }
  },
  methods:{},
  created(){},
  mounted(){}
}
</script>
<style scoped>
</style>

• store文件夹中的index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    tabbarShow:true
  },
  getters:{
    getTabbarShow(state){
        return state.tabbarShow
    }
  },
  mutations: {
    updateTabbarShow(state, payload){
      state.tabbarShow = payload
    }
  },
  actions: {}
});

• 效果如下：

  
  
  效果图.jpg