Vue-cli4——TabBar底部导航栏代码解析

Vue-cli4——TabBar底部导航栏代码解析

Day1

---

---

前言

此文章根据官方文档及些网络资料编写，仅供个人使用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

目录

tabbar
	src
		components
			tabbar
				TabBar.vue
				TabBarItem.vue
			MainTabBar.vue
		router
			index.js
		views
			cart
				Cart.vue
			category
				Category.vue
			home
				Home
			profile
				Profile
	App.vue

源码在下面自提，我在这里简单讲一下项目结构

1. 首先！我先按照项目顺序将下来
2. TabBar.vue：该文件是定义导航栏的框架，也就是背景。
3. TabBarItem.vue：该文件是定义item框架，例如该如何展示导航栏的内容，以及点击导航栏有什么效果，反应什么的。
4. MainTabBar.vue用来显示具体的内容，以及设置需要的样式。

• 第二步我来讲解下功能

• 设置点击某个导航，显示导航页面

  • TabBarItem.vue

  • 当点击到该区域时执行itemClick方法，然后从props中获取到path地址，最后进入到该地址

    • <div class="tab-bar-item" @click="itemClick">
      

    • 	props: {
         path: String
       },
       methods: {
          itemClick() {
           this.$router.replace(this.path)
         }
       }
      

  • MainTabBar.vue

  • 设置导航的地址

    • <tab-bar-item path="/home">
      <tab-bar-item path="/catagory">
      <tab-bar-item path="/cart">
      <tab-bar-item path="/profile">
      

  • 结论：TabBarItem.vue中的this.path调用的其实是MainTabBar.vue中的path地址

• 点击某个导航栏时，该导航栏更改图标

  • TabBarItem.vue

  • 如果是活跃（被点击）时isActive会返回true，否则返回false，这里取反，活跃时就执行下面活跃的插槽

    • <div v-if="!isActive">
        <slot name="item-icon"></slot>
      </div>
      <div v-else>
        <slot name="item-icon-action"></slot>
      </div>
      

  • 查找this.$route.path中有没有this.path

    •     props: {
            path: String
          },
        computed: {
          isActive(){
          // indexOf是查找this.$route.path有没有this.path 找不到就会返回-1
        return this.$route.path.indexOf(this.path) !== -1
        }
      

  • 结论：当你点击图标的时候，$route.path的地址就是你点击的path地址，将该地址与MainTabBar.vue中的4个path比较，当有一个相同，则将那个改变图标。

• 点击某个导航栏时，更改文字颜色，文字颜色随MainTabBar.vue设置而变化

  • TabBarItem.vue

  • 动态样式绑定名为 activeStyle 的计算属性，activeStyle：如果isActive不为false（意思是设置活跃的那个导航颜色），则将样式返回给上面的style样式

    •     <div :style="activeStyle">
            <slot name="item-text"></slot>
          </div>
      

    •   props: {
          path: String,
          activeColor: {
            type: String,
            default: 'red'
          }
        },
        computed: {
          activeStyle(){
            return this.isActive ? {color: this.activeColor}:{}
          }
        },
      

  • MainTabBar.vue

  • 将导航栏的文字颜色设置为蓝色

    • <tab-bar-item path="/home" activeColor="blue">
      <tab-bar-item path="/catagory" activeColor="blue">
      <tab-bar-item path="/cart" activeColor="blue">
      <tab-bar-item path="/profile" activeColor="blue">
      

  • 结论：TabBarItem.vue获取到MainTabBar.vue的activeColor颜色，将样式改为该颜色

components/tabbar/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: #f6f6f6;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  box-shadow: 0 -1px 1px rgba(100,100,100,.2);
}

</style>

components/tabbar/TabBarItem.vue

<template>
  <!--所有的item都展示同一个图片, 同一个文字-->
  <div class="tab-bar-item" @click="itemClick">
    <div v-if="!isActive">
      <slot name="item-icon"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-action"></slot>
    </div>
    <div :style="activeStyle">
      <slot name="item-text"></slot>
    </div>
    <!--<img src="../../assets/img/tabbar/home.svg" alt="">-->
    <!--<div>首页</div>-->
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props: {
    path: String,
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  /*data() {
    return {
      isActive: true
    }
  },*/
  computed: {
    isActive(){
      // indexOf是查找this.$route.path有没有this.path 找不到就会返回-1
      return this.$route.path.indexOf(this.path) !== -1
    },
    activeStyle(){
      return this.isActive ? {color: this.activeColor}:{}
    }
  },
  methods: {
    itemClick() {
      this.$router.replace(this.path)
    }
  }
}
</script>

<style scoped>

.active {
  color: red;
}
</style>

components/MainTabBar.vue

<template>
  <tab-bar>
    <tab-bar-item path="/home" activeColor="blue">
      <template v-slot:item-icon>
        <img src="../assets/img/tabbar/home.svg" alt="">
      </template>
      <template v-slot:item-icon-action>
        <img src="../assets/img/tabbar/home_active.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>首页</div>
      </template>
    </tab-bar-item>

    <tab-bar-item path="/catagory" activeColor="blue">
      <template v-slot:item-icon>
        <img src="../assets/img/tabbar/category.svg" alt="">
      </template>
      <template v-slot:item-icon-action>
        <img src="../assets/img/tabbar/category_active.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>分类</div>
      </template>
    </tab-bar-item>

    <tab-bar-item path="/cart" activeColor="blue">
      <template v-slot:item-icon>
        <img src="../assets/img/tabbar/shopcart.svg" alt="">
      </template>
      <template v-slot:item-icon-action>
        <img src="../assets/img/tabbar/shopcart_active.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>购物车</div>
      </template>
    </tab-bar-item>

    <tab-bar-item path="/profile" activeColor="blue">
      <template v-slot:item-icon>
        <img src="../assets/img/tabbar/profile.svg" alt="">
      </template>
      <template v-slot:item-icon-action>
        <img src="../assets/img/tabbar/profile_active.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>我的</div>
      </template>
    </tab-bar-item>
  </tab-bar>
</template>

<script>
import TabBar from "@/components/tabbar/TabBar";
import TabBarItem from "@/components/tabbar/TabBarItem";
export default {
name: "MainTabBar",
  components: {
    TabBarItem,
    TabBar
  }
}
</script>

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

.tab-bar-item img {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  vertical-align: middle;
  margin-bottom: 2px;
}
</style>

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/cart',
    name: 'Cart',
    component: () => import('../views/cart/Cart')
  },
  {
    path: '/home',
    name: 'Home2',
    component: () => import('../views/home/Home')
  },
  {
    path: '/catagory',
    name: 'Catagory',
    component: () => import('../views/category/Category')
  },
  {
    path: '/profile',
    name: 'Profile',
    component: () => import('../views/profile/Profile')
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

views/cart/Cart.vue

<template>
<h2>购物车</h2>
</template>

<script>
export default {
name: "Cart"
}
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <main-tab-bar/>
  </div>
</template>

<script>

import MainTabBar from "@/components/MainTabBar";

export default {
  name: 'App',
  components: {
    MainTabBar
  }
}
</script>

<style lang="scss">
@import "./assets/css/base.css";


</style>

总结