Bagaimana untuk menukar gaya menu dalam uniapp selepas mengkliknya

Hari ini kami akan berkongsi cara melaksanakan fungsi menukar gaya menu selepas mengkliknya dalam uniapp.

Dalam banyak aplikasi, menu merupakan bahagian penting. Biasanya, apabila pengguna mengklik pada item menu, ia harus mencerminkan fakta bahawa pilihan itu dipilih. Ini bermakna gaya pilihan harus berubah. Dalam uniapp ini sangat mudah untuk dilaksanakan.

Pertama, kita perlu mencipta komponen menu yang mudah. Di sini kita akan mencipta komponen menu navigasi asas. Anda boleh mengubah suai mengikut keperluan aplikasi anda.

<template>
  <div class="menu">
    <ul>
      <li @click="handleClick(0)" :class="{active: activeIndex === 0}">首页</li>
      <li @click="handleClick(1)" :class="{active: activeIndex === 1}">新闻</li>
      <li @click="handleClick(2)" :class="{active: activeIndex === 2}">关于我们</li>
      <li @click="handleClick(3)" :class="{active: activeIndex === 3}">联系我们</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0
    };
  },
  methods: {
    handleClick(index) {
      this.activeIndex = index;
    }
  }
};
</script>

<style scoped>
.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.menu ul li {
  display: inline-block;
  padding: 16px;
  cursor: pointer;
}
.menu ul li.active {
  background-color: #007bff;
  color: #fff;
}
</style>

Dalam contoh di atas, kami mempunyai sifat data activeIndex yang digunakan untuk menjejak item menu yang dipilih. Kami juga mempunyai kaedah handleClick yang mengemas kini activeIndex apabila pengguna mengklik pada item menu. Akhir sekali, dalam bahagian gaya, kami mentakrifkan kelas yang dipanggil .aktif yang mempunyai gaya untuk item menu yang dipilih.

Kini, jika anda menggunakan komponen menu ini dalam aplikasi anda, anda akan melihat bahawa apabila anda mengklik pada item menu, gayanya berubah. Walau bagaimanapun, jika anda menggunakan komponen ini dalam halaman lain, item menu yang dipilih sebelum ini akan ditetapkan semula kepada nilai lalainya. Untuk menyelesaikan masalah ini, kami perlu menggunakan bas acara yang disediakan oleh uniapp.

Bas acara ialah sistem acara peringkat rangka kerja yang membenarkan mana-mana komponen dalam aplikasi melanggan dan menerbitkan acara. Menggunakan bas acara kita boleh berkongsi data dan keadaan antara komponen.

Kami perlu membuat bas acara terlebih dahulu di main.js:

import Vue from 'vue';

export const EventBus = new Vue();

Seperti yang dinyatakan di atas, kami hanya mengimport vue dan mencipta contoh EventBus. Kini kami boleh menggunakannya dalam mana-mana komponen untuk menerbitkan dan melanggan acara.

Sekarang mari kita kembali ke komponen menu dan tambah kod berikut dalam kaedah handleClick:

handleClick(index) {
  this.activeIndex = index;
  EventBus.$emit('menu-item-clicked', index);
}

Di sini kami menggunakan contoh EventBus untuk menerbitkan item yang dipanggil "menu-item-clicked " acara dan melepasi indeks item menu yang sedang dipilih.

Kini, dalam mana-mana komponen lain aplikasi, kami boleh melanggan acara ini dan mengemas kini item menu pilihannya. Marilah kami menambah kod berikut pada komponen halaman berdasarkan idea ini:

<template>
  <div>
    <menu></menu>
    <h2>{{ pageTitle }}</h2>
    <p>{{ pageContent }}</p>
  </div>
</template>

<script>
import { EventBus } from '@/main';

export default {
  data() {
    return {
      pageTitle: '首页',
      pageContent: '欢迎来到我们的网站！'
    };
  },
  created() {
    EventBus.$on('menu-item-clicked', index => {
      switch (index) {
        case 0:
          this.pageTitle = '首页';
          this.pageContent = '欢迎来到我们的网站！';
          break;
        case 1:
          this.pageTitle = '新闻';
          this.pageContent = '这里是我们的最新消息。';
          break;
        case 2:
          this.pageTitle = '关于我们';
          this.pageContent = '了解我们的历史和团队。';
          break;
        case 3:
          this.pageTitle = '联系我们';
          this.pageContent = '与我们联系。我们非常期待与您合作！';
          break;
        default:
          this.pageTitle = '首页';
          this.pageContent = '欢迎来到我们的网站！';
      }
    });
  }
};
</script>

<style scoped>
h2 {
  margin-top: 0;
}
</style>

Di sini, kami memperkenalkan EventBus yang dibuat dalam main.js dan melanggan acara "menu-item-clicked". Apabila acara ini dicetuskan, kami mengemas kini tajuk halaman dan kandungan dengan indeks item menu yang diluluskan.

Kini apabila anda mengklik pilihan dalam menu, anda akan melihat tajuk halaman dan kandungan anda berubah dengan sewajarnya.

Untuk meringkaskan, kami telah melaksanakan fungsi dalam uniapp yang mengubah gaya menu selepas mengkliknya. Kami menggunakan komponen menu navigasi asas dan menggunakan bas acara untuk menerbitkan acara yang dipanggil "menu-item-clicked" apabila item menu diklik. Mana-mana komponen boleh melanggan acara ini dan mengemas kini item menu yang dipilih.

Atas ialah kandungan terperinci Bagaimana untuk menukar gaya menu dalam uniapp selepas mengkliknya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!