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;

在路由配置完成后，我们可以在组件中使用fe6d2595e1ccaf5e073ca04f6f49d67fIndexd625018d6d57dc2163f3a71531b24864这种方式来跳转页面。

三、实现导航栏组件

在Vue中，一个组件可以通过d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2来定义它的HTML结构，通过3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0来定义它的JavaScript代码，通过c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927来定义它的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中，然后通过975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e

2 Présentez Vue Router dans main.js et configurez le routage.

rrreee

Une fois la configuration du routage terminée, nous pouvons utiliser 13a0cb67c081a5363326c861bc44f9d8Indexd625018d6d57dc2163f3a71531b24864 dans le composant pour sauter à la page.

3. Implémentez le composant de la barre de navigation #🎜🎜##🎜🎜#Dans Vue, un composant peut être défini via la structure HTML d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2 , son code JavaScript est défini via 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 et son style CSS est défini via c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 . #🎜🎜##🎜🎜#Voici la structure HTML de la barre de navigation WeChat : #🎜🎜#rrreee#🎜🎜#Dans la structure ci-dessus, nous utilisons v-bind:class pour lier l'état d'activation du menu actuel article. activeIndex est l'indice de l'élément de menu actuellement activé. L'effet d'activation de l'élément de menu est obtenu en jugeant si l'indice de l'élément de menu actuel est égal à activeIndex. #🎜🎜##🎜🎜#Voici le code JavaScript de ce composant : #🎜🎜#rrreee#🎜🎜#Dans le code ci-dessus, nous utilisons la fonction hook créée pour appeler la méthode getActiveIndex afin de déterminer l'élément de menu correspondant à l'itinéraire actuel doit être actif. Dans le même temps, nous utilisons également watch pour surveiller les changements de routage. Lorsque le routage change, la méthode getActiveIndex est appelée pour mettre à jour l'état d'activation. #🎜🎜##🎜🎜#Ce qui suit est le code CSS de ce composant : #🎜🎜#rrreee#🎜🎜#Dans le code CSS ci-dessus, nous définissons le style de la barre de navigation, où .nav définit le style de base de la barre de navigation, .nav-item définit le style de chaque élément de menu et .nav-item.active définit le style de l'élément de menu actuellement actif. #🎜🎜##🎜🎜#4. Utilisez le composant de la barre de navigation #🎜🎜##🎜🎜#Dans Vue, il suffit de mettre le composant dans le composant qui doit être affiché. Voici un exemple d'utilisation du composant de barre de navigation : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, nous plaçons le composant de barre de navigation dans App.vue, puis transmettons 975b587bf85a482ea10b0a28848e78a4&lt ; /router-view> pour afficher les composants correspondant à l'itinéraire actuel. De cette façon, nous pouvons implémenter une barre de navigation de type WeChat dans Vue. #🎜🎜##🎜🎜# 5. Résumé #🎜🎜##🎜🎜# La mise en œuvre d'une barre de navigation imitation WeChat implique Vue Router et la conception de composants. Vue Router est utilisé pour gérer les sauts de page, et la conception des composants peut rendre le code plus concis et plus facile à gérer. Bien entendu, il reste encore de nombreux domaines à améliorer dans la barre de navigation de type WeChat dans cet article, comme l'ajout de composants de recherche, l'ajout de rappels de messages, etc. Cependant, il faudra plus de temps et d'énergie pour finaliser les améliorations ci-dessus. J'espère que les idées de mise en œuvre présentées dans cet article pourront aider les lecteurs. #🎜🎜#

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!