Material Design 下 Bottom Navigation 中显示聚焦效果的方法

Material Design 下 Bottom Navigation 中显示聚焦效果的方法

在 Material Design 中，Bottom Navigation（底部导航栏）是一种常用的导航 UI 元素。它通常由多个操作选项组成，可以通过点击每个选项来切换不同的页面或功能模块。为了增强用户体验，我们可以添加聚焦效果，使用户在操作时能够更加明确的知道当前所选中的操作选项。本文将介绍 Material Design 下 Bottom Navigation 中显示聚焦效果的方法并提供示例代码。

一、实现思路

实现 Bottom Navigation 中显示聚焦效果，需要在底部导航栏中选中当前操作选项时，添加一个聚焦效果。我们可以使用阴影效果来实现这种视觉上的聚焦效果。当用户选中某个操作选项时，通过添加阴影效果让当前选项看起来更加突出、有焦点。

二、实现步骤

1. 为底部导航栏中每个操作选项添加选中事件

在 HTML 中，我们需要给每个底部导航栏中操作选项添加选中事件，以便在用户选中某个选项时能够调用相关事件进行处理。比如设置当前选项选中状态、添加聚焦效果等。代码如下：

<nav class="bottom-nav">
  <a href="#" class="nav-item active" onclick="handleNavigationItemClick(event)">
    <i class="material-icons">home</i>
    <span>Home</span>
  </a>
  <a href="#" class="nav-item" onclick="handleNavigationItemClick(event)">
    <i class="material-icons">search</i>
    <span>Search</span>
  </a>
  <a href="#" class="nav-item" onclick="handleNavigationItemClick(event)">
    <i class="material-icons">account_circle</i>
    <span>Account</span>
  </a>
</nav>

1. 处理选中事件

在 JavaScript 中，我们需要编写事件处理函数来处理用户选中某个底部导航栏中的操作选项。具体实现步骤如下：

2.1 获取当前选项

当用户选中某个操作选项时，我们需要获取该选项的 DOM 节点，以便后续操作。代码如下：

function handleNavigationItemClick(event) {
  const activeNavItem = event.currentTarget;
}

2.2 清除选中状态

在设置当前选项的选中状态前，我们需要先清除其它选项的选中状态。代码如下：

function handleNavigationItemClick(event) {
  const activeNavItem = event.currentTarget;
  
  // 清除其它 nav-item 的选中状态
  const navItems = document.querySelectorAll('.nav-item');
  navItems.forEach(navItem => {
    if (navItem !== activeNavItem) {
      navItem.classList.remove('active');
    }
  });
  
  // 设置当前选中 nav-item 的选中状态
  activeNavItem.classList.add('active');
}

2.3 添加阴影效果

添加阴影效果是实现底部导航栏聚焦效果的关键步骤。我们可以通过修改当前选项的样式来添加阴影效果。代码如下：

function handleNavigationItemClick(event) {
  const activeNavItem = event.currentTarget;
  
  // 清除其它 nav-item 的选中状态
  const navItems = document.querySelectorAll('.nav-item');
  navItems.forEach(navItem => {
    if (navItem !== activeNavItem) {
      navItem.classList.remove('active');
      
      // 清除其它 nav-item 的阴影效果
      navItem.style.boxShadow = 'none';
    }
  });
  
  // 设置当前选中 nav-item 的选中状态和阴影效果
  activeNavItem.classList.add('active');
  activeNavItem.style.boxShadow = '0px -3px 1px -2px rgba(0, 0, 0, 0.2), 0px -2px 2px 0px rgba(0, 0, 0, 0.14), 0px -1px 5px 0px rgba(0, 0, 0, 0.12)';
}

1. CSS 样式

为了让底部导航栏显示得更加美观，我们还需要添加一些 CSS 样式来优化其外观。代码如下：

/* 底部导航栏样式 */
.bottom-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-color: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

/* 导航项样式 */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 56px;
  height: 56px;
  line-height: 1;
  text-decoration: none;
  color: #757575;
}

.nav-item.active {
  color: #4caf50;
}

三、示例代码

完整的实现代码如下：

// HTML

<nav class="bottom-nav">
  <a href="#" class="nav-item active" onclick="handleNavigationItemClick(event)">
    <i class="material-icons">home</i>
    <span>Home</span>
  </a>
  <a href="#" class="nav-item" onclick="handleNavigationItemClick(event)">
    <i class="material-icons">search</i>
    <span>Search</span>
  </a>
  <a href="#" class="nav-item" onclick="handleNavigationItemClick(event)">
    <i class="material-icons">account_circle</i>
    <span>Account</span>
  </a>
</nav>

// JavaScript

function handleNavigationItemClick(event) {
  const activeNavItem = event.currentTarget;
  
  // 清除其它 nav-item 的选中状态
  const navItems = document.querySelectorAll('.nav-item');
  navItems.forEach(navItem => {
    if (navItem !== activeNavItem) {
      navItem.classList.remove('active');
      
      // 清除其它 nav-item 的阴影效果
      navItem.style.boxShadow = 'none';
    }
  });
  
  // 设置当前选中 nav-item 的选中状态和阴影效果
  activeNavItem.classList.add('active');
  activeNavItem.style.boxShadow = '0px -3px 1px -2px rgba(0, 0, 0, 0.2), 0px -2px 2px 0px rgba(0, 0, 0, 0.14), 0px -1px 5px 0px rgba(0, 0, 0, 0.12)';
}

// CSS

/* 底部导航栏样式 */
.bottom-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background-color: #fff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

/* 导航项样式 */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 56px;
  height: 56px;
  line-height: 1;
  text-decoration: none;
  color: #757575;
}

.nav-item.active {
  color: #4caf50;
}

四、总结

通过实现 Material Design 下 Bottom Navigation 中显示聚焦效果的方法，我们可以增强用户体验，使用户更加清楚地知道当前所选中的操作选项。在实现过程中，需要注意清除其它选项的选中状态和阴影效果，以及添加相应的 CSS 样式完善底部导航栏的外观。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65911fc2eb4cecbf2d65b780