今天我们来分享一下如何在uniapp中实现一个菜单点击后改变样式的功能。
在很多应用程序中，菜单是不可或缺的一部分。通常，当用户点击菜单项时，它应该会反映出选项被选中的事实。这意味着选项的样式应该改变。在uniapp中，这是非常容易实现的。
首先，我们需要创建一个简单的菜单组件。这里我们将创建一个基本的导航菜单组件。您可以根据您的应用程序需要来修改它。
在上面的示例中，我们有一个数据属性 activeIndex，它用于跟踪哪个菜单项是选定的。我们还有一个 method handleClick，它会在用户单击某个菜单项时更新 activeIndex。最后，在样式部分，我们定义了一个名为.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”的事件，并传递当前选定的菜单项的索引。
现在，在应用程序的任何其他组件中，我们都可以订阅此事件并更新其选定的菜单项。让我们根据这个思路在页面组件中添加如下代码：
{{ pageTitle }}
{{ pageContent }}
在这里，我们引入了 main.js 中创建的 EventBus，在页面组件的 created 生命钩子中订阅“menu-item-clicked”事件。当该事件被触发时，我们使用传递的菜单项索引更新页面标题和内容。
现在，当你在菜单中点击一个选项，你会看到你的页面标题和内容随之改变。
总结一下，我们在 uniapp 中实现了一个菜单点击后改变样式的功能。我们使用了一个基本的导航菜单组件，并在菜单项被点击时使用事件总线发布名为“menu-item-clicked”的事件。任何组件都可以订阅此事件并更新其选定的菜单项。
