Super detailed tutorial to implement Vue bottom navigation bar TabBar

Project Introduction:
Project Directory:
TabBar effect preview:
TabBar Implementation Idea

1. If there is a separate TabBar component below, how to encapsulate it
2. The actual content in the TabBar is determined by the outside world.
3. Customize TabBarItem, you can pass in pictures and text

Project file directory creation

File Directory Introduction

File alias code

App.vue code

MainTabBar.vue code

TabBar.vue code

TabBarItem.vue code

index.js routing configuration code

home.vue code

category.vue code

profile.vue code

cart.vue code

Base.css code

img picture resources

Summarize:

Main difficulties:

Project Introduction:

Requirements: The text in the tabbar must be dynamically changed, the images corresponding to the text must be dynamically changed and added, the text color must be changed accordingly, the images of the TabBarItem must be dynamically changed and added, the entire project must be flexible, and slots, routing, and value transfer between parent and child components must be used. $router must be used to display the corresponding page when clicking an item. It is highly comprehensive. When encountering similar projects during project development, you only need to copy the main code to build the general framework of the project.

Project Directory:

Vue implements TabBar bottom navigation bar component

TabBar effect preview:

vueTabBar component encapsulation

TabBar Implementation Idea

1. If there is a separate TabBar component below, how to encapsulate it

Customize the tabbar component and use it in APP.
Make the TabBar at the bottom and set related styles.

2. The actual content in the TabBar is determined by the outside world.

Define the slots.
Flex layout rating TabBar.

3. Customize TabBarItem, you can pass in pictures and text

Customize tabbarItem and define two slots: picture and text.
Give the two slots an outer wrapper div for styling.
Fill the slot to achieve the effect of the bottom TabBar.

The method is feasible, let's implement it first. Let's introduce the directory

Project file directory creation

Vue implements TabBar bottom navigation bar component

File Directory Introduction

I created a views folder with five files in it. The five files contain five vue files, corresponding to each button under the navigation bar.

Vue implements TabBar bottom navigation bar component

Create css and img folders under assets to place the images and basic classes required for the tabbar buttons.

Vue implements TabBar bottom navigation bar component

Create a MainTabBar.vue file and a tabbar folder in the component folder. Place the subcomponents of MainTabBar and various slot-related files in the tabbar folder.

Vue implements TabBar bottom navigation bar component

The index file in the router folder configures the routing file

Vue implements TabBar bottom navigation bar component

main.js is the entry file of the project. All pages in the project will load main.js, so main.js has three main functions:

Instantiate VUE
Place frequently used plugins and CSS styles in the project, such as network request axios and vue-resource, and lazy loading module for images: vue-;azyload
Store global variables such as basic information, etc.

Code implementation in each folder

The first step is to create a file alias.

Find the resolve object and write the aliases of each file in alias:

Vue implements TabBar bottom navigation bar component

File alias code

Code:

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'assets': resolve('src/assets'),      
      'components': resolve('src/components'),
      'views': resolve('src/views'),
    }
  },

App.vue code

Reference the MainTabBar component and the files corresponding to each tabbaritem in App.vue:

<template>
  <div id="app">
    <router-view></router-view>
    <main-tab-bar></main-tab-bar>
  </div>
</template>
<script type="module">
import MainTabBar from 'components/MainTabBar'
export default {
  name: 'App',
  components:{
    MainTabBar
  }
}
</script>
 
<style>
  @import "assets/css/base";
</style>

MainTabBar.vue code

MainTabBar component code: The component is required to meet the requirements of modifying the number, color, text, etc. of TabBarItem dynamically. Various slots need to be created.

<template>
   <div>
       <tab-bar>
      <tab-bar-item path="/home" activeColor="purple">
        <img slot="item-icon" src="~assets/img/tabbar/shouye.png" alt="" >
        <img slot="item-icon-active" src="~assets/img/tabbar/shouye.active.png" alt="">
        <div slot="item-text">Home</div>
      </tab-bar-item>
      <tab-bar-item path="/category" activeColor="purple">
         <img slot="item-icon" src="~assets/img/tabbar/fenlei.png" alt="">
      <img slot="item-icon-active" src="~assets/img/tabbar/fenlei.active.png" alt="">
         <div slot="item-text">Category</div>
      </tab-bar-item>
      <tab-bar-item path="/cart" activeColor="purple">
         <img slot="item-icon" src="~assets/img/tabbar/gouwuche.png" alt="">
         <img slot="item-icon-active" src="~assets/img/tabbar/gouwuche.active.png" alt="">
        <div slot="item-text">Shopping Cart</div>
      </tab-bar-item>
      <tab-bar-item path="/profile" activeColor="purple">
         <img slot="item-icon" src="~assets/img/tabbar/wode.png" alt="">
         <img slot="item-icon-active" src="~assets/img/tabbar/wode.active.png" alt="">
        <div slot="item-text">My</div>
      </tab-bar-item>
    </tab-bar>
   </div>
</template>

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

<style>

</style>

TabBar.vue code

TabBar.vue file, change the file to the subcomponent in MainTabBar.vue:

<template>  
    <div id="tab-bar">
      <slot></slot>
    </div>
</template>
<script>
export default {
    name:'TabBar'
}
</script>

<style>

</style>

TabBarItem.vue code

TabBarItem.vue is a subcomponent of MainTabBar.vue

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

<script>
export default {
    name:"TabBarItem",
    props:{
      path:String,
      activeColor:{
        type:String,
        default:'red'
      }
    },
    data(){
        return {
           // isActive:true
        }
    },
    computed:{
      isActive(){
        //Judgement//return this.$route.path.indexOf(this.path) !== -1
        //return this.$route.path === this.path
        return this.$route.path.indexOf(this.path)?false:true
      },
      activeStyle(){
        return this.isActive?{color:this.activeColor}:{}
      }
    },
    methods:{
      itemClick(){
        this.$router.replace(this.path)
      }
    }

}
</script>

<style>
     #tab-bar{
    display: flex;
    
  }
  #tab-bar{
    background-color: #f6f6f6;
    border-top: 2px #ccc;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow:0px -1px 1px rgba(100,100,100,.2);
  }
  .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: 3px;
 }
 .active{
     color: red;
 }
</style>

index.js routing configuration code

The index file in the router folder is the routing configuration:

import Vue from 'vue'
import VueRouter from 'vue-router';
const Home = () => import('views/home/home')
const Category = () => import('views/category/category')
const Cart = () => import('views/cart/cart')
const Profile = () => import('../views/profile/profile')

//1. Install the plugin Vue.use(VueRouter)

//2. Create a routing object const routes = [
    {
        path:'',
        redirect:'/home'    
    },
    {
        path:'/home',
        component:Home    
    },
    {
        path:'/category',
        component:Category    
    },
    {
        path:'/cart',
        component:Cart    
    },
    {
        path:'/profile',
        component:Profile    
    }
]
const router = new VueRouter({
    routes,
    mode:'history'
})

//3. Export router
export default router

Home code, cart code, profile code, category code in views:

home.vue code

<template>
    <h2>Home</h2>
</template>

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

<style>

</style>

category.vue code

<template>
    <h2>Categories</h2>
</template>

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

<style>

</style>

profile.vue code

<template>
    <h2>Personal</h2>
</template>

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

<style>

</style>

cart.vue code

<template>
    <h2>Shopping Cart</h2>
</template>

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

<style>

</style>

Base.css code

The content of base.css under CSS file:

body{
    padding: 0px;
    margin: 0px;
}

img picture resources

Vue implements TabBar bottom navigation bar component

Implementation completed~

Summarize:

The project is very comprehensive, including various knowledge about slots, routing, value transfer of sub-components and parent components, and alias settings.
Dynamic content of the project: The text, pictures, and colors of the tabbar can be changed dynamically, and similar projects can directly reference these files next time.

Main difficulties:

1. When clicking on the corresponding TabBarItem, change the image color and text color. Here, check whether the current active route corresponds to the passed address. If so, it will become true and return false:

computed:{
      isActive(){
        //Judge return this.$route.path.indexOf(this.path)?false:true
      },
      activeStyle(){
        return this.isActive?{color:this.activeColor}:{}
      }
    },
    methods:{
      itemClick(){
        this.$router.replace(this.path)
      }
    }

The above code has other methods:

       return this.$route.path.indexOf(this.path) !== -1
       return this.$route.path === this.path

2. Parent component value transfer problem: The parent component passes the corresponding file path and font color, which the child component accepts and uses:

export default {
    name:"TabBarItem",
    props:{
      path:String,
      activeColor:{
        type:String,
        default:'red'
      }
    },
    data(){
        return {}
    },

Project completed~

This concludes this article about Vue's implementation of the TabBar bottom navigation bar. I hope it will be helpful for everyone’s study, and I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue custom bottom navigation bar Tabbar implementation code
Detailed explanation of Vue bottom navigation bar component
Solution to the problem that the sub-routes are not displayed in the first-level route display of the bottom navigation bar of vue.js

<<: Explanation on whether to choose paging or loading in interactive design

>>: Detailed steps to build a file server in Windows Server 2012