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를 업데이트하는 handlerClick 메서드도 있습니다. 마지막으로 스타일 섹션에서는 선택한 메뉴 항목에 대한 스타일이 있는 .active라는 클래스를 정의합니다.

이제 애플리케이션에서 이 메뉴 구성 요소를 사용하면 메뉴 항목을 클릭하면 스타일이 변경되는 것을 볼 수 있습니다. 그러나 이 구성 요소를 다른 페이지에서 사용하면 이전에 선택한 메뉴 항목이 기본값으로 재설정됩니다. 이 문제를 해결하기 위해서는 유니앱에서 제공하는 이벤트 버스를 사용해야 합니다.

이벤트 버스는 애플리케이션의 모든 구성 요소가 이벤트를 구독하고 게시할 수 있도록 하는 프레임워크 수준 이벤트 시스템입니다. 이벤트 버스를 사용하면 구성 요소 간에 데이터와 상태를 공유할 수 있습니다.

먼저 main.js에서 이벤트 버스를 만들어야 합니다.

import Vue from 'vue';

export const EventBus = new Vue();

위에서 언급했듯이 vue를 가져오고 EventBus 인스턴스를 만듭니다. 이제 모든 구성 요소에서 이를 사용하여 이벤트를 게시하고 구독할 수 있습니다.

이제 메뉴 구성 요소로 돌아가서 handlerClick 메서드에 다음 코드를 추가해 보겠습니다.

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" 이벤트를 구독합니다. . 이 이벤트가 시작되면 전달된 메뉴 항목 인덱스로 페이지 제목과 콘텐츠가 업데이트됩니다.

이제 메뉴에서 옵션을 클릭하면 그에 따라 페이지 제목과 콘텐츠가 변경되는 것을 볼 수 있습니다.

요약하자면 유니앱에서 메뉴 클릭 후 스타일을 변경하는 기능을 구현했습니다. 우리는 기본 탐색 메뉴 구성 요소를 사용하고 이벤트 버스를 사용하여 메뉴 항목을 클릭할 때 "menu-item-clicked"라는 이벤트를 게시하고 있습니다. 모든 구성 요소는 이 이벤트를 구독하고 선택한 메뉴 항목을 업데이트할 수 있습니다.

위 내용은 uniapp 클릭 후 메뉴 스타일을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!