js 手机端上下滑动菜单

基础概念

在JavaScript中，手机端上下滑动菜单通常指的是通过触摸屏幕上的滑动动作来控制菜单的显示和隐藏。这种交互方式在移动设备上非常常见，因为它提供了直观且便捷的用户体验。

类型

全屏滑动菜单：整个屏幕可以滑动切换不同的内容区域。
侧边栏滑动菜单：从屏幕边缘滑出的菜单，常用于导航。
底部抽屉菜单：从屏幕底部滑出的菜单，常用于快捷操作。

应用场景

移动应用导航：如社交媒体应用的侧边栏导航。
设置页面：通过滑动展示更多选项。
快捷工具栏：在游戏或某些应用中快速访问常用功能。

示例代码

以下是一个简单的底部抽屉菜单的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swipe Menu Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
  }
  .menu.open {
    transform: translateY(0);
  }
  .content {
    padding: 20px;
  }
</style>
</head>
<body>

<div class="content">
  <h1>Main Content</h1>
  <button onclick="toggleMenu()">Toggle Menu</button>
</div>

<div class="menu" id="menu">
  <ul>
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

<script>
function toggleMenu() {
  const menu = document.getElementById('menu');
  menu.classList.toggle('open');
}

// Optional: Add touch event listeners for swipe functionality
let startY = 0;
document.addEventListener('touchstart', function(event) {
  startY = event.touches[0].clientY;
});

document.addEventListener('touchend', function(event) {
  const endY = event.changedTouches[0].clientY;
  const diff = endY - startY;
  if (diff > 50) { // Swipe down to close menu
    document.getElementById('menu').classList.remove('open');
  } else if (diff < -50) { // Swipe up to open menu
    document.getElementById('menu').classList.add('open');
  }
});
</script>

</body>
</html>