How to implement a WeChat-like navigation bar in Vue?

With the popularity of mobile Internet, APP has become an indispensable tool in people's daily life. The navigation bar in the APP is an important part of the APP, and the design of the navigation bar directly affects the user experience. Among APPs, WeChat is undoubtedly one of the most commonly used applications. WeChat's navigation bar is designed to be simple, beautiful, and easy to use. Users can easily and quickly switch to various functional modules through the navigation bar. This article will introduce how to implement a WeChat-like navigation bar in Vue.

1. Design the navigation bar

Before designing the navigation bar, we need to understand the style design of the WeChat navigation bar. The WeChat navigation bar mainly has the following characteristics:

1. It adopts fixed positioning and is always fixed at the top of the screen.

2. Each menu item in the navigation bar is a button, which can jump to the corresponding page after clicking it.

3. The current page label in the navigation bar will be highlighted.

After understanding the design features of the WeChat navigation bar, we can start designing the WeChat-like navigation bar in Vue. The design of the navigation bar imitating WeChat mainly includes the following aspects:

1. Use fixed positioning so that the navigation bar is always fixed at the top of the screen.

2. Each menu item in the navigation bar is a component. After clicking, you can jump to the corresponding page through routing.

3. The current page menu item in the navigation bar will be highlighted.

2. Component design

In order to implement the component design of the navigation bar, we can encapsulate each menu item into a component. These components can realize page jump through Vue Router. In Vue, we can use routing to manage jumps between pages. Therefore we need to install and use Vue Router. The following is the installation method of Vue Router:

1. Use npm to install Vue Router.

npm install vue-router

2. Introduce Vue Router in main.js and configure routing.

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
  {
    path: '/',
    name: 'Index',
    component: () => import('@/components/Index.vue')
  },
  {
    path: '/chat',
    name: 'Chat',
    component: () => import('@/components/Chat.vue')
  },
  {
    path: '/contacts',
    name: 'Contacts',
    component: () => import('@/components/Contacts.vue')
  },
  {
    path: '/discover',
    name: 'Discover',
    component: () => import('@/components/Discover.vue')
  },
  {
    path: '/me',
    name: 'Me',
    component: () => import('@/components/Me.vue')
  }
]
const router = new VueRouter({
  routes
});
export default router;

After the routing configuration is completed, we can use <router-link to="/">Index</router-link> in the component to jump. page.

3. Implement the navigation bar component

In Vue, a component can define its HTML structure through <template></template>, through<script></script> to define its JavaScript code, and <style></style> to define its CSS style.

The following is the HTML structure of the WeChat navigation bar:

<template>
  <div class="nav">
    <div class="nav-item" :class="{active: activeIndex === 0}" @click="$router.push('/')"><i class="iconfont icon-weixin"></i>微信</div>
    <div class="nav-item" :class="{active: activeIndex === 1}" @click="$router.push('/contacts')"><i class="iconfont icon-tongxunlu"></i>通讯录</div>
    <div class="nav-item" :class="{active: activeIndex === 2}" @click="$router.push('/discover')"><i class="iconfont icon-faxian"></i>发现</div>
    <div class="nav-item" :class="{active: activeIndex === 3}" @click="$router.push('/me')"><i class="iconfont icon-wo"></i>我</div>
  </div>
</template>

In the above structure, we use v-bind:class to bind the activation status of the current menu item. activeIndex is the subscript of the currently activated menu item. The activation effect of the menu item is achieved by judging whether the subscript of the current menu item is equal to activeIndex.

The following is the JavaScript code of the component:

<script>
export default {
  data () {
    return {
      activeIndex: 0
    };
  },
  created () {
    this.getActiveIndex();
  },
  methods: {
    getActiveIndex () {
      const path = this.$route.path;
      switch (path) {
        case '/':
          this.activeIndex = 0;
          break;
        case '/contacts':
          this.activeIndex = 1;
          break;
        case '/discover':
          this.activeIndex = 2;
          break;
        case '/me':
          this.activeIndex = 3;
          break;
        default:
          this.activeIndex = 0;
          break;
      }
    }
  },
  watch: {
    $route () {
      this.getActiveIndex();
    }
  }
};
</script>

In the above code, we use the created hook function to call the getActiveIndex method to determine that the menu item corresponding to the current route should be activated. . At the same time, we also use watch to monitor routing changes. When the routing changes, the getActiveIndex method is called to update the activation status.

The following is the CSS code of the component:

<style>
.nav {
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
}
.nav-item {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #9b9b9b;
}
.nav-item.active {
  color: #4caf50;
}
</style>

In the above CSS code, we define the style of the navigation bar, where .nav defines the basic style of the navigation bar, .nav- item defines the style of each menu item, and .nav-item.active defines the style of the currently active menu item.

4. Using the navigation bar component

In Vue, we only need to put the component into the component that needs to be displayed. The following is an example of using the navigation bar component:

// App.vue
<template>
  <div>
    <Nav></Nav>
    <router-view></router-view>
  </div>
</template>

<script>
import Nav from '@/components/Nav.vue';
export default {
  components: {
    Nav
  }
}
</script>

In the above example, we put the navigation bar component in App.vue, and then pass <router-view></router -view> to display the components corresponding to the current route. In this way, we can implement a WeChat-like navigation bar in Vue.

5. Summary

The implementation of imitation WeChat navigation bar involves Vue Router and component design. Vue Router is used to manage page jumps, and the component design can make the code more concise and easier to manage. Of course, there are still many areas for improvement in the WeChat-like navigation bar in this article, such as adding search components, adding message reminders, etc. However, it will take more time and energy to complete the above improvements. I hope that the implementation ideas in this article can bring some help to readers.

The above is the detailed content of How to implement a WeChat-like navigation bar in Vue?. For more information, please follow other related articles on the PHP Chinese website!