Comment implémenter une barre de navigation de type WeChat dans Vue ?

Avec la popularité de l’Internet mobile, l’APP est devenue un outil indispensable dans la vie quotidienne des gens. La barre de navigation de l'APP est une partie importante de l'APP et la conception de la barre de navigation affecte directement l'expérience utilisateur. Parmi les applications, WeChat est sans aucun doute l’une des applications les plus couramment utilisées. La barre de navigation de WeChat est conçue pour être simple, belle et facile à utiliser. Les utilisateurs peuvent facilement et rapidement basculer vers divers modules fonctionnels via la barre de navigation. Cet article explique comment implémenter une barre de navigation de type WeChat dans Vue.

1. Concevoir la barre de navigation

Avant de concevoir la barre de navigation, nous devons comprendre le style de conception de la barre de navigation WeChat. La barre de navigation WeChat présente principalement les caractéristiques suivantes :

1 Elle adopte un positionnement fixe et est toujours fixe en haut de l'écran.

2. Chaque élément de menu de la barre de navigation est un bouton, qui peut accéder à la page correspondante après avoir cliqué dessus.

3. Le titre de la page actuelle dans la barre de navigation sera mis en surbrillance.

Après avoir compris les caractéristiques de conception de la barre de navigation WeChat, nous pouvons commencer à concevoir la barre de navigation de type WeChat dans Vue. La conception de la barre de navigation de type WeChat comprend principalement les aspects suivants :

1 Utiliser un positionnement fixe pour que la barre de navigation soit toujours fixée en haut de l'écran.

2. Chaque élément de menu de la barre de navigation est un composant. Après avoir cliqué, vous pouvez accéder à la page correspondante via le routage.

3. L'élément de menu de la page actuelle dans la barre de navigation sera mis en surbrillance.

2. Conception des composants

Afin de réaliser la conception des composants de la barre de navigation, nous pouvons encapsuler chaque élément de menu dans un composant. Ces composants peuvent réaliser des sauts de page via Vue Router. Dans Vue, on peut utiliser le routage pour gérer les sauts entre les pages. Nous devons donc installer et utiliser Vue Router. Voici la méthode d'installation de Vue Router :

1 Utilisez npm pour installer Vue Router.

npm install vue-routernpm install vue-router

2.在main.js中引入Vue Router并配置路由。

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;

在路由配置完成后，我们可以在组件中使用<router-link to="/">Index</router-link>这种方式来跳转页面。

三、实现导航栏组件

在Vue中，一个组件可以通过<template></template>来定义它的HTML结构，通过<script></script>来定义它的JavaScript代码，通过<style></style>来定义它的CSS样式。

下面是仿微信导航栏的HTML结构：

<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>

上面的结构中，我们使用了v-bind:class绑定了当前菜单项的激活状态。activeIndex为当前激活的菜单项的下标，通过判断当前菜单项的下标是否等于activeIndex来实现菜单项的激活效果。

下面是该组件的JavaScript代码：

<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>

上面的代码中，我们使用了created钩子函数来调用getActiveIndex方法，来判断当前路由所对应的菜单项应该处于激活状态。同时，我们还使用了watch监听路由变化，当路由发生变化时，调用getActiveIndex方法从而更新激活状态。

下面是该组件的CSS代码：

<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>

上面的CSS代码中，我们定义了导航栏的样式，其中，.nav定义了导航栏的基本样式，.nav-item定义了每个菜单项的样式，.nav-item.active定义了当前激活菜单项的样式。

四、使用导航栏组件

在Vue中，我们只需要将组件放到需要展示的组件中即可。下面是一个使用导航栏组件的例子：

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

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

在上面的例子中，我们将导航栏组件放到App.vue中，然后通过<router-view></router-view>

rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!