uniappのメニューをクリックした後にメニュースタイルを変更する方法

今日は、uniappでメニューをクリックした後にメニューのスタイルを変更する機能を実装する方法を共有します。

多くのアプリケーションでは、メニューは不可欠な部分です。通常、ユーザーがメニュー項目をクリックすると、そのオプションが選択されたことが反映されるはずです。これは、オプションのスタイルを変更する必要があることを意味します。 uniapp では、これは非常に簡単に実装できます。

まず、単純なメニュー コンポーネントを作成する必要があります。ここでは、基本的なナビゲーション メニュー コンポーネントを作成します。アプリケーションのニーズに応じて変更できます。

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

上の例では、どのメニュー項目が選択されているかを追跡するために使用されるデータ プロパティ activeIndex があります。ユーザーがメニュー項目をクリックしたときに activeIndex を更新するメソッド handleClick もあります。最後に、スタイル セクションで、選択したメニュー項目のスタイルを持つ .active というクラスを定義します。

このメニュー コンポーネントをアプリケーションで使用すると、メニュー項目をクリックするとスタイルが変わることがわかります。ただし、このコンポーネントを別のページで使用すると、以前に選択したメニュー項目がデフォルト値にリセットされます。この問題を解決するには、uniapp が提供するイベント バスを使用する必要があります。

イベント バスは、アプリケーション内の任意のコンポーネントがイベントをサブスクライブおよびパブリッシュできるようにするフレームワーク レベルのイベント システムです。イベント バスを使用すると、コンポーネント間でデータと状態を共有できます。

最初に main.js でイベント バスを作成する必要があります:

import Vue from 'vue';

export const EventBus = new Vue();

上で述べたように、必要なのは vue をインポートして EventBus インスタンスを作成することだけです。これで、任意のコンポーネントでこれを使用して、イベントのパブリッシュとサブスクライブを行うことができます。

ここで、メニュー コンポーネントに戻り、handleClick メソッドに次のコードを追加します。

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

ここでは、EventBus インスタンスを使用して、「menu-item-clicked」という名前の項目を公開します。イベントを呼び出して、現在選択されているメニュー項目のインデックスを渡します。

これで、アプリケーションの他のコンポーネントで、このイベントをサブスクライブし、選択されたメニュー項目を更新できるようになります。このアイデアに基づいて、次のコードをページ コンポーネントに追加しましょう。

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

ここでは、main.js で作成された EventBus を導入し、作成されたライフ フックの "menu-item-clicked" をサブスクライブします。ページコンポーネントのイベント。このイベントが発生すると、渡されたメニュー項目インデックスを使用してページのタイトルとコンテンツを更新します。

メニューのオプションをクリックすると、ページのタイトルとコンテンツがそれに応じて変更されるのがわかります。

要約すると、uniappにメニューをクリックした後にスタイルを変更する機能を実装しました。基本的なナビゲーション メニュー コンポーネントを使用し、イベント バスを使用して、メニュー項目がクリックされたときに「menu-item-clicked」というイベントを発行します。どのコンポーネントもこのイベントをサブスクライブし、選択されたメニュー項目を更新できます。

以上がuniappのメニューをクリックした後にメニュースタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。