最好看的TabBar（Vue）

今天跟大家分享一个自己模仿得物的tabbar栏，用Vue写的！用到了router，实现了页面动态的跳转。

目录结构（分了3个vue  template）

TabBar.vue

TabBarItem.vue

MainTabBar.vue

源码

MainTabBar.vue

<template>
    <tab-bar>
        <tab-bar-item path="/home">
            <template v-slot:item-icon><img class="logo-image" src="../../../src/assets/img/logo2.png" alt=""></template>
            <template v-slot:item-icon-active><img class="logo-image" src="../../../src/assets/img/logo2.png" alt=""></template>
        </tab-bar-item>
        <tab-bar-item path="/home" activeColor="mediumturquoise">
            <template v-slot:item-text><div class="title-style">首页</div></template>
            <template v-slot:item-icon><img src="" alt=""></template>
            <template v-slot:item-icon-active><img class="hengxian" src="../../../src/assets/img/hengxian.png" alt=""></template>
        </tab-bar-item>
        <tab-bar-item path="/shop" activeColor="mediumturquoise">
            <template v-slot:item-text><div class="title-style">购物精选</div></template>
            <template v-slot:item-icon><img src="" alt=""></template>
            <template v-slot:item-icon-active><img class="hengxian" src="../../../src/assets/img/hengxian.png" alt=""></template>
        </tab-bar-item>
        <tab-bar-item path="/community" activeColor="mediumturquoise">
            <template v-slot:item-text><div class="title-style">社区精选</div></template>
            <template v-slot:item-icon><img src="" alt=""></template>
            <template v-slot:item-icon-active><img class="hengxian" src="../../../src/assets/img/hengxian.png" alt=""></template>
        </tab-bar-item>
        <tab-bar-item path="/store" activeColor="mediumturquoise">
            <template v-slot:item-text><div class="title-style">商家入住</div></template>
            <template v-slot:item-icon><img src="" alt=""></template>
            <template v-slot:item-icon-active><img class="hengxian" src="../../../src/assets/img/hengxian.png" alt=""></template>
        </tab-bar-item>
        <tab-bar-item path="/create" activeColor="mediumturquoise">
            <template v-slot:item-text><div class="title-style">创作者服务</div></template>
            <template v-slot:item-icon><img src="" alt=""></template>
            <template v-slot:item-icon-active><img class="hengxian" src="../../../src/assets/img/hengxian.png" alt=""></template>
        </tab-bar-item>
        <tab-bar-item path="/about" activeColor="mediumturquoise">
            <template v-slot:item-text><div class="title-style">关于我们</div></template>
            <template v-slot:item-icon><img src="" alt=""></template>
            <template v-slot:item-icon-active><img class="hengxian" src="../../../src/assets/img/hengxian.png" alt=""></template>
        </tab-bar-item>
        </tab-bar>
</template>

<script>
    import TabBar from "./tabbar/TabBar";
    import TabBarItem from "./tabbar/TabBarItem";

    export default {
        name: "MainTabBar",
        components: {
            TabBar,
            TabBarItem
        }
    }
</script>

<style scoped>
    .title-style {
        font-weight: bold;
        position: relative;
        top: 20px;
        cursor: pointer;
    }
    .title-style:hover {
        color: #48decc;
    }

    .logo-image {
        width: 100px;
        position: relative;
        top: 20px;
    }

    .hengxian {
        position: relative;
        top: 23px;
        width: 50px;
        height: 15px;
    }
</style>

TabBarItem.vue

<template>
    <div class="tab-bar-item" @click="itemClick">
        <div :style="activeStyle"><slot name="item-text"></slot></div>
        <div v-if="!isActive"><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
    </div>
</template>

<script>
    export default {
        name: "TarBarItem",
        props: {
            path: String,
            activeColor: {
                type: String,
                /*如果没有参数 则这个为默认的颜色*/
                default: '#48decc'
            }
        },
        data() {
           return {
               // isActive: true
           }
        },
        computed: {
          isActive() {
              /*动态决定颜色是否改变*/
              return this.$route.path.indexOf(this.path) !== -1
          },
            activeStyle() {
              return this.isActive ? {color: this.activeColor} : {}
            }
        },
        methods: {
            itemClick() {
                this.$router.push(this.path)
            }
        }
    }
</script>

<style scoped>
    .tab-bar-item {
        flex: 1;
        text-align: center;
        height: 69px;
    }

    .tab-bar-item img {

    }

TabBar.vue

<template>
    <div id="tab-bar">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "TabBar",
    }
</script>

<style scoped>
    #tab-bar {
        display: flex;
        background-color: rgba(202,203,203,0.09);
        box-shadow: -3px 0 1px rgba(100,100,100,.6);
    }
</style>

其中router跟view的结构

router中的代码（目录记得改）

import { createRouter, createWebHistory } from 'vue-router'

const Home = () => import('../views/home/Home');
const About = () => import('../views/about/About');
const Community = () => import('../views/community/Community');
const Shop = () => import('../views/shop/Shop');
const Store = () => import('../views/store/Store');
const Create = () => import('../views/create/Create');

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/community',
    component: Community
  },
  {
    path: '/shop',
    component: Shop
  },
  {
    path: '/store',
    component: Store
  },
  {
    path: '/create',
    component: Create
  }
];

const router = createRouter({
  // history: createWebHashHistory(),
  history: createWebHistory(process.env.BASE_URL),
  routes,
  mode: 'history'
});

export default router

第一次发，谢谢支持！！！