How to change the menu style in uniapp after clicking on it

Today we will share how to implement the function of changing the style of a menu after clicking it in uniapp.

In many applications, menus are an integral part. Normally, when a user clicks on a menu item, it should reflect the fact that the option is selected. This means that the style of the options should change. In uniapp this is very easy to implement.

First, we need to create a simple menu component. Here we will create a basic navigation menu component. You can modify it according to your application needs.

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

In the above example, we have a data property activeIndex which is used to track which menu item is selected. We also have a method handleClick that updates activeIndex when the user clicks on a menu item. Finally, in the styles section, we define a class called .active that has the styles for the selected menu item.

Now, if you use this menu component in your application, you will see that when you click on the menu item, its style changes. However, if you use this component in a different page, the previously selected menu item will be reset to its default value. In order to solve this problem, we need to use the event bus provided by uniapp.

The event bus is a framework-level event system that allows any component in the application to subscribe to and publish events. Using the event bus we can share data and state between components.

We first need to create an event bus in main.js:

import Vue from 'vue';

export const EventBus = new Vue();

As mentioned above, we only need to import vue and create an EventBus instance. Now we can use it in any component to publish and subscribe to events.

Now let's go back to the menu component and add the following code in the handleClick method:

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

Here, we use the EventBus instance to publish an item named "menu-item-clicked" event, passing the index of the currently selected menu item.

Now, in any other component of the application, we can subscribe to this event and update its selected menu item. Let us add the following code to the page component based on this idea:

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

Here, we introduce the EventBus created in main.js and subscribe to "menu-item-clicked" in the created life hook of the page component. event. When this event is fired, we update the page title and content with the passed menu item index.

Now, when you click an option in the menu, you will see your page title and content change accordingly.

To summarize, we have implemented the function of changing the style of a menu after clicking it in uniapp. We're using a basic navigation menu component and using an event bus to publish an event called "menu-item-clicked" when the menu item is clicked. Any component can subscribe to this event and update its selected menu item.

The above is the detailed content of How to change the menu style in uniapp after clicking on it. For more information, please follow other related articles on the PHP Chinese website!