Bagaimana untuk melaksanakan menu bawah seperti WeChat dalam Vue?

Dalam aplikasi web moden, menu bawah sering digunakan sebagai entri utama untuk navigasi dan operasi. WeChat ialah aplikasi mudah alih yang popular dan reka bentuk menu bawahnya telah menarik perhatian dan kasih sayang yang meluas.

Vue ialah rangka kerja JavaScript untuk pembangunan aplikasi web moden. Ia menyediakan cara yang mudah dan intuitif untuk membina aplikasi berkualiti tinggi dengan komponen boleh guna semula. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan menu bawah seperti WeChat.

Langkah 1: Buat projek Vue

Sebelum kita mula, kita perlu buat projek Vue terlebih dahulu. Masukkan arahan berikut dalam baris arahan:

vue create wechat-menu

dan kemudian ikut arahan untuk mengkonfigurasi. Antaranya, pilih pilihan "Pilih ciri secara manual", pilih "Babel" dan "Penghala", dan langkau semua pilihan lain. Ini akan membuat projek untuk kami dengan sokongan Babel dan penghala Vue.

Langkah Kedua: Sediakan Penghala

Penghala Vue membolehkan kami membuat Aplikasi Halaman Tunggal (SPA) di mana semua pemuatan dan pemaparan halaman berlaku dalam halaman yang sama. Dalam projek kami, kami perlu menggunakan penghala untuk mentakrif dan mengurus pandangan yang berbeza dari menu bawah.

Mula-mula, buka fail /src/router/index.js, padamkan kod penghala lalai dan gantikannya dengan kod berikut:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Profile from '@/views/Profile.vue'
import Settings from '@/views/Settings.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile
  },
  {
    path: '/settings',
    name: 'Settings',
    component: Settings
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Dalam kod di atas, kami mula-mula mengimport Vue dan VueRouter dan menggunakan Vue.use( ) kaedah untuk memperkenalkan mereka penghala. Kemudian, tiga laluan ditakrifkan, iaitu Laman Utama, Profil dan Tetapan, dan laluan dan komponen yang sepadan ditentukan untuknya masing-masing. Laluan / ditetapkan kepada laluan Laman Utama, laluan /profile ialah laluan Profil, dan laluan /setting ialah laluan Tetapan.

Seterusnya, dalam pilihan konfigurasi penghala, pilihan mod digunakan dengan nilai 'sejarah', yang membolehkan mod HTML5, yang membolehkan kami menggunakan alat pengurusan keadaan penghalaan tanpa mencincang URL '#'. Dalam pilihan asas, kami mengkonfigurasi laluan URL asas untuk penghala.

Akhir sekali, kami membuat seketika VueRouter dan mengeksportnya. Ini akan membolehkan kami menggunakan APInya dalam komponen lain aplikasi.

Langkah 3: Buat komponen menu bawah

Seterusnya, kami akan mencipta komponen menu bawah, yang mengandungi tiga butang, sepadan dengan tiga laluan yang kami tetapkan.

Pertama, kita perlu mencipta komponen Vue baharu. Dalam direktori /src/components/, cipta fail bernama BottomMenu.vue. Berikut ialah kandungan awal fail:

<template>
  <div class="bottom-menu">
    <router-link to="/" class="bottom-menu-item">
      <i class="fas fa-home"></i>
    </router-link>
    <router-link to="/profile" class="bottom-menu-item">
      <i class="fas fa-user"></i>
    </router-link>
    <router-link to="/settings" class="bottom-menu-item">
      <i class="fas fa-cog"></i>
    </router-link>
  </div>
</template>

<script>
export default {}
</script>

<style>
.bottom-menu {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.1);
}

.bottom-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #777;
}

.bottom-menu-item i {
  font-size: 24px;
  margin-bottom: 5px;
}
</style>

Dalam kod di atas, kami mula-mula mentakrifkan elemen div yang mengandungi tiga elemen pautan penghala yang akan menyediakan navigasi laluan. Setiap pautan penghala mempunyai atribut kepada, yang menunjuk kepada komponen yang sepadan dengan laluan penghalaan yang kami tentukan.

Kemudian, kami menetapkan gaya untuk kelas menu bawah dan item menu bawah untuk mencantikkan penampilan menu bawah. Antaranya, .bottom-menu menggunakan susun atur fleksibel untuk menetapkan warna latar belakang, isi dan bayangan kotak menu bawah. Kelas item menu bawah mentakrifkan sifat gaya elemen anaknya.

Langkah 4: Tambahkan komponen menu bawah pada komponen root

Sekarang kita telah menulis komponen bar bawah dan menyediakan penghala, kini kita perlu menambah komponen bar bawah pada aplikasi kita.

Mula-mula, buka fail /src/views/Home.vue. Tambahkan kod berikut di dalamnya:

<template>
  <div class="home">
    <h1>Home</h1>
    <BottomMenu />
  </div>
</template>

<script>
import BottomMenu from '../components/BottomMenu.vue';

export default {
  name: 'Home',
  components: {
    BottomMenu
  }
};
</script>

<style>
.home {
  text-align: center;
}
</style>

Dalam kod di atas, kami mula-mula mengimport komponen BottomMenu dan menambahkannya pada sifat komponen komponen semasa. Kemudian, kami menggunakan komponen BottomMenu dalam templat dan meletakkannya di bahagian bawah halaman.

Seterusnya, ulangi langkah di atas dan tambahkan komponen BottomMenu dalam /src/views/Profile.vue dan /src/views/Settings.vue. Kemudian, kami melengkapkan aplikasi Vue yang meniru menu bawah WeChat!

Ini adalah langkah lengkap tentang cara menggunakan Vue untuk melaksanakan menu bawah seperti WeChat. Sepanjang perjalanan, kami menggunakan Penghala Vue untuk mengurus navigasi pandangan berbeza dalam menu bawah, serta mencipta komponen Vue baharu untuk memaparkan menu itu sendiri. Akhir sekali, kami menambah komponen menu bawah pada setiap paparan dalam aplikasi untuk memastikan ia kelihatan pada setiap halaman.

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