uniapp怎么实现菜单点击后改变样式

百变鹏仔 4周前 (11-20) #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，它用于跟踪哪个菜单项是选定的。我们还有一个 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”的事件，并传递当前选定的菜单项的索引。

现在，在应用程序的任何其他组件中，我们都可以订阅此事件并更新其选定的菜单项。让我们根据这个思路在页面组件中添加如下代码：

<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，在页面组件的 created 生命钩子中订阅“menu-item-clicked”事件。当该事件被触发时，我们使用传递的菜单项索引更新页面标题和内容。

现在，当你在菜单中点击一个选项，你会看到你的页面标题和内容随之改变。

总结一下，我们在 uniapp 中实现了一个菜单点击后改变样式的功能。我们使用了一个基本的导航菜单组件，并在菜单项被点击时使用事件总线发布名为“menu-item-clicked”的事件。任何组件都可以订阅此事件并更新其选定的菜单项。

文章推荐

uniapp怎么实现菜单点击后改变样式

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项