Bagaimana untuk melaksanakan bar navigasi seperti WeChat dalam Vue?

Dengan populariti Internet mudah alih, APP telah menjadi alat yang sangat diperlukan dalam kehidupan seharian manusia. Bar navigasi dalam APP ialah bahagian penting APP dan reka bentuk bar navigasi secara langsung mempengaruhi pengalaman pengguna. Di antara APP, WeChat sudah pasti salah satu aplikasi yang paling biasa digunakan. Bar navigasi WeChat direka bentuk agar ringkas, cantik dan mudah digunakan. Pengguna boleh dengan mudah dan cepat beralih kepada pelbagai modul berfungsi melalui bar navigasi. Artikel ini akan memperkenalkan cara melaksanakan bar navigasi seperti WeChat dalam Vue.

1. Reka bentuk bar navigasi

Sebelum mereka bentuk bar navigasi, kita perlu memahami reka bentuk gaya bar navigasi WeChat. Bar navigasi WeChat mempunyai ciri utama berikut:

1 Ia menggunakan kedudukan tetap dan sentiasa ditetapkan di bahagian atas skrin.

2 Setiap item menu dalam bar navigasi ialah butang, yang boleh melompat ke halaman yang sepadan selepas mengkliknya.

3 Label halaman semasa dalam bar navigasi akan diserlahkan.

Selepas memahami ciri reka bentuk bar navigasi WeChat, kami boleh mula mereka bentuk bar navigasi seperti WeChat dalam Vue. Reka bentuk bar navigasi yang meniru WeChat terutamanya merangkumi aspek berikut:

1 Gunakan kedudukan tetap supaya bar navigasi sentiasa ditetapkan di bahagian atas skrin.

2. Setiap item menu dalam bar navigasi ialah komponen Selepas mengklik, anda boleh melompat ke halaman yang sepadan melalui penghalaan.

3 Item menu halaman semasa dalam bar navigasi akan diserlahkan.

2. Reka bentuk komponen

Untuk melaksanakan reka bentuk komponen bar navigasi, kami boleh merangkum setiap item menu ke dalam komponen. Komponen ini boleh merealisasikan lompatan halaman melalui Penghala Vue. Dalam Vue, kita boleh menggunakan penghalaan untuk mengurus lompatan antara halaman. Oleh itu kita perlu memasang dan menggunakan Penghala Vue. Berikut ialah cara memasang Penghala Vue:

1. Gunakan npm untuk memasang Penghala Vue.

npm pasang vue-router npm 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;

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

三、实现导航栏组件

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

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

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

下面是该组件的JavaScript代码：

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

下面是该组件的CSS代码：

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

四、使用导航栏组件

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

// App.vue  

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

rrreee