Vue melaksanakan pautan antara tab dan bar navigasi sisi

Dengan populariti peranti mudah alih dan aplikasi web, semakin banyak aplikasi memerlukan penggunaan tab dan bar navigasi sisi untuk membantu pengguna menavigasi dan menyemak imbas. Kemunculan rangka kerja Vue telah sangat memudahkan proses membangunkan aplikasi sedemikian, dan menjadikannya sangat mudah untuk melaksanakan kaitan antara tab dan bar navigasi sisi.

Dalam artikel ini, kita akan melihat cara melaksanakan pautan bar navigasi tab dan sisi dalam Vue, dan menggunakan kesan peralihan Vue untuk meningkatkan pengalaman pengguna.

Pertama, mari kita fahami apakah tab dan navigasi sisi dan cara ia berfungsi dalam apl.

Tab dan bar navigasi sisi sering digunakan untuk membantu pengguna mencari dan mengakses bahagian dan fungsi yang berbeza dalam aplikasi dengan cepat dan mudah. Tab biasanya digunakan untuk membahagikan kandungan halaman kepada berbilang tab Setiap tab memaparkan maklumat yang berbeza, seperti maklumat peribadi, pesanan saya, troli beli-belah, dsb. dalam tapak web e-dagang Menggunakan tab membolehkan pengguna bertukar kepada maklumat yang diperlukan muka surat.

Manakala bar navigasi sisi biasanya digunakan untuk memaparkan semua halaman dan ciri dalam aplikasi dan boleh diakses dengan mengklik pada pilihan dalam menu navigasi. Apabila menggunakan bar navigasi sisi, pengguna boleh menyemak imbas keseluruhan aplikasi dengan pantas dan kemudian mengakses halaman yang dikehendaki melalui pilihan dalam menu navigasi.

Sekarang, kami akan menunjukkan cara untuk melaksanakan pautan bar navigasi tab dan sisi dalam aplikasi Vue.

Pertama, kita perlu mencipta komponen Vue untuk mewakili tab. Dalam komponen ini, kami akan menggunakan sifat komponen Vue untuk mewakili pilihan tab yang berbeza. Berikut ialah contoh komponen tab mudah:

<template>
  <div>
    <ul>
      <li 
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{active: activeTab === index}"
        @click="activeTab = index"
      >
        {{ tab.name }}
      </li>
    </ul>
    <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
      {{ tab.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      tabs: [
        {
          name: 'Tab 1',
          content: 'This is tab 1 content.'
        },
        {
          name: 'Tab 2',
          content: 'This is tab 2 content.'
        },
        {
          name: 'Tab 3',
          content: 'This is tab 3 content.'
        }
      ]
    }
  }
}
</script>

<style>
li.active {
  background-color: lightblue;
}
</style>

Dalam komponen ini, kami menggunakan atribut activeTab untuk mewakili indeks tab yang sedang aktif. Apabila pengguna mengklik pada mana-mana tab, indeks tab itu akan ditetapkan kepada nilai dalam atribut activeTab. Kami kemudian hanya memaparkan kandungan tab jika indeks tab semasa adalah sama dengan indeks tab aktif.

Seterusnya, kita perlu mencipta komponen bar navigasi sisi dan memautkannya dengan komponen tab. Apabila pengguna mengklik pada pilihan dalam bar navigasi sisi, tab yang sepadan akan diaktifkan. Berikut ialah contoh komponen bar navigasi sisi yang ringkas:

<template>
  <div>
    <ul>
      <li 
        v-for="(navItem, index) in navItems"
        :key="index"
        :class="{active: activeTab === index}"
        @click="activeTab = index"
      >
        {{ navItem }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeTab: 0,
      navItems: this.tabs.map(tab => tab.name)
    }
  },
  watch: {
    activeTab() {
      this.$emit('tab-change', this.activeTab)
    }
  }
}
</script>

<style>
li.active {
  background-color: lightblue;
}
</style>

Dalam komponen ini, kami menerima data tab sebagai harta daripada komponen induk dan menggunakan fungsi map untuk mengekstrak nama tab sebagai tatasusunan . Apabila pengguna mengklik pada mana-mana tab, indeks tab itu akan ditetapkan kepada nilai dalam atribut activeTab dan kami menggunakan atribut watch Vue untuk memantau perubahan atribut activeTab. Apabila sifat activeTab berubah, kami menggunakan sistem acara Vue untuk menghantar indeks tab kepada komponen induk.

Sekarang kami telah melaksanakan tab dan komponen bar navigasi sisi, langkah seterusnya ialah menggabungkannya bersama-sama untuk mencapai kesan pautan.

Pertama, dalam komponen induk, kita perlu mencipta reka letak keseluruhan aplikasi menggunakan komponen tab dan komponen bar navigasi sisi. Berikut ialah contoh komponen induk yang mudah:

<template>
  <div>
    <nav-bar 
      :tabs="tabs" 
      @tab-change="activeTab = $event"
    ></nav-bar>
    <tab-bar :tabs="tabs" :active-tab="activeTab"></tab-bar>
  </div>
</template>

<script>
import NavBar from './NavBar.vue'
import TabBar from './TabBar.vue'

export default {
  components: {
    NavBar,
    TabBar
  },
  data() {
    return {
      activeTab: 0,
      tabs: [
        {
          name: 'Tab 1',
          content: 'This is tab 1 content.'
        },
        {
          name: 'Tab 2',
          content: 'This is tab 2 content.'
        },
        {
          name: 'Tab 3',
          content: 'This is tab 3 content.'
        }
      ]
    }
  }
}
</script>

Dalam komponen induk ini, kami menggunakan komponen tab dan komponen bar navigasi sisi masing-masing sebagai komponen anak dan menghantar data tab kepada dua komponen anak ini. Kami juga mendaftarkan acara tab-change pada komponen bar navigasi sisi untuk mendengar perubahan tab dan menetapkan indeks tab baharu kepada atribut activeTab.

Kini, tab dan bar navigasi sisi kami telah dipautkan. Walau bagaimanapun, kesan pensuisan ini masih terasa agak kaku. Untuk menjadikan pertukaran antara dua komponen ini lebih lancar, kami boleh menggunakan kesan peralihan Vue untuk meningkatkan pengalaman pengguna.

Dalam Vue, kesan peralihan dicapai dengan menambahkan nama kelas peralihan antara komponen. Kita boleh menentukan kelas kesan peralihan masing-masing untuk tab dan komponen bar navigasi sisi, dan kemudian tambah nama kelas peralihan apabila bertukar.

Berikut ialah contoh:

/* 选项卡过渡类 */
.tab-transition {
  transition: all 0.5s;
  opacity: 0;
}

.tab-transition-enter,
.tab-transition-leave-to {
  opacity: 0;
}

.tab-transition-enter-active,
.tab-transition-leave-active {
  opacity: 1;
}

/* 侧导航栏过渡类 */
.nav-transition {
  transition: all 0.5s;
  transform: translateX(-50%);
}

.nav-transition-enter,
.nav-transition-leave-to {
  transform: translateX(-50%);
}

.nav-transition-enter-active,
.nav-transition-leave-active {
  transform: translateX(0);
}

Dalam contoh ini, kami mentakrifkan kelas kesan peralihan bernama .tab-transition dan kelas kesan peralihan bernama .nav-transition. Kelas kesan peralihan ini akan ditambahkan pada tab atau komponen navigasi sisi apabila ia masuk atau keluar.

Akhir sekali, kita perlu menggunakan kesan peralihan ini pada tab dan komponen navigasi sisi. Untuk mencapai matlamat ini, kita perlu menggunakan komponen <transition> terbina dalam Vue. Berikut ialah contoh membalut komponen tab dan bar navigasi sisi dalam komponen <transition>:

<transition name="tab-transition">
  <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
    <app-tab :tab="tab"></app-tab>
  </div>
</transition>

<transition name="nav-transition">
  <nav-bar 
    :tabs="tabs" 
    @tab-change="activeTab = $event"
  ></nav-bar>
</transition>

Dalam contoh ini, kami membalut komponen tab dalam komponen <transition>, mentakrifkan nama untuknya Animasi peralihan untuk tab-transition. Kami menggunakan gelung v-for untuk menjadikan tab sebagai elemen <div> dan menggunakan arahan v-show untuk menunjukkan atau menyembunyikan komponen tab berdasarkan nilai indeks tab semasa.

Untuk komponen bar navigasi sisi, kami juga menggunakan komponen <transition> dan mentakrifkan animasi peralihan bernama nav-transition untuknya.

Kini, kami telah melengkapkan aplikasi Vue yang memautkan tab dan bar navigasi sisi, dan menggunakan kesan peralihan Vue untuk menambahkan beberapa ciri dinamik padanya. Teknik ini bukan sahaja meningkatkan pengalaman pengguna tetapi juga menjadikan aplikasi lebih menarik dan boleh digunakan.

Atas ialah kandungan terperinci Vue melaksanakan pautan antara tab dan bar navigasi sisi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!