uniapp怎么实现菜单点击后改变样式-uni-app-PHP中文网

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

PHPz

发布： 2023-04-18 15:20:23

原创

1919人浏览过

今天我们来分享一下如何在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 实例。现在我们可以在任何组件中使用它来发布和订阅事件。

图改改

在线修改图片文字

455

查看详情

现在让我们回到菜单组件中，并在 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怎么实现菜单点击后改变样式的详细内容，更多请关注php中文网其它相关文章！