Bagaimana untuk melaksanakan bar navigasi seperti WeChat dalam Vue?-View.js-php.cn

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

Salin selepas log masuk

在路由配置完成后，我们可以在组件中使用<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>

Salin selepas log masuk

上面的结构中，我们使用了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>

Salin selepas log masuk

上面的代码中，我们使用了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>

Salin selepas log masuk

上面的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>

Salin selepas log masuk

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

2. Perkenalkan Vue Router dalam main.js dan konfigurasikan penghalaan.

rrreee

Selepas konfigurasi penghalaan selesai, kita boleh menggunakan <router-link to="/">Index</router-link> dalam komponen untuk melompat ke halaman.

3. Laksanakan komponen bar navigasi🎜🎜Dalam Vue, komponen boleh menentukan struktur HTMLnya melalui <template></template>, dan melalui <script>&lt ; /script> untuk menentukan kod JavaScriptnya dan <style></style> untuk menentukan gaya CSSnya. 🎜🎜Berikut ialah struktur HTML bar navigasi WeChat: 🎜rrreee🎜Dalam struktur di atas, kami menggunakan v-bind:class untuk mengikat status pengaktifan item menu semasa. activeIndex ialah subskrip item menu yang sedang diaktifkan Kesan pengaktifan item menu dicapai dengan menilai sama ada subskrip item menu semasa adalah sama dengan activeIndex. 🎜🎜Berikut ialah kod JavaScript komponen ini: 🎜rrreee🎜Dalam kod di atas, kami menggunakan fungsi cangkuk yang dicipta untuk memanggil kaedah getActiveIndex untuk menentukan bahawa item menu yang sepadan dengan laluan semasa harus diaktifkan. Pada masa yang sama, kami juga menggunakan jam tangan untuk memantau perubahan penghalaan Apabila penghalaan berubah, kaedah getActiveIndex dipanggil untuk mengemas kini status pengaktifan. 🎜🎜Berikut ialah kod CSS komponen ini: 🎜rrreee🎜Dalam kod CSS di atas, kami mentakrifkan gaya bar navigasi Antaranya, .nav mentakrifkan gaya asas bar navigasi dan .nav-item mentakrifkan. gaya setiap item menu Gaya, .nav-item.active mentakrifkan gaya item menu yang sedang aktif. 🎜🎜4. Gunakan komponen bar navigasi 🎜🎜Dalam Vue, kita hanya perlu memasukkan komponen ke dalam komponen yang perlu dipaparkan. Berikut ialah contoh penggunaan komponen bar navigasi: 🎜rrreee🎜Dalam contoh di atas, kami meletakkan komponen bar navigasi ke dalam App.vue, dan kemudian lulus

<router-view></router-view> untuk memaparkan komponen yang sepadan dengan laluan semasa. Dengan cara ini, kami boleh melaksanakan bar navigasi seperti WeChat dalam Vue. 🎜🎜5. Ringkasan🎜🎜Pelaksanaan bar navigasi WeChat tiruan melibatkan Penghala Vue dan reka bentuk komponen. Penghala Vue digunakan untuk mengurus lompatan halaman, dan reka bentuk komponen boleh menjadikan kod lebih ringkas dan lebih mudah untuk diurus. Sudah tentu, masih terdapat banyak bidang untuk penambahbaikan dalam bar navigasi seperti WeChat dalam artikel ini, seperti menambah komponen carian, menambah peringatan mesej, dsb. Walau bagaimanapun, ia akan mengambil lebih banyak masa dan tenaga untuk menyelesaikan penambahbaikan di atas saya berharap idea-idea pelaksanaan dalam artikel ini dapat membawa sedikit bantuan kepada pembaca. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan bar navigasi seperti WeChat dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!