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</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        .menu-container {
            display: flex;
            width: 300%; /* 假设有三个菜单项 */
            transition: transform 0.3s ease-in-out;
        }
        .menu-item {
            flex: 1;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            color: white;
        }
        #menu1 { background-color: #3498db; }
        #menu2 { background-color: #2ecc71; }
        #menu3 { background-color: #e74c3c; }
    </style>
</head>
<body>
    <div class="menu-container" id="menuContainer">
        <div class="menu-item" id="menu1">Menu 1</div>
        <div class="menu-item" id="menu2">Menu 2</div>
        <div class="menu-item" id="menu3">Menu 3</div>
    </div>

    <script>
        let startX = 0;
        let currentTranslate = 0;
        const menuContainer = document.getElementById('menuContainer');
        const menuItems = document.querySelectorAll('.menu-item');
        const menuWidth = window.innerWidth;

        menuContainer.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
        });

        menuContainer.addEventListener('touchmove', (e) => {
            const currentX = e.touches[0].clientX;
            const diffX = currentX - startX;
            currentTranslate = diffX;
            menuContainer.style.transform = `translateX(${currentTranslate}px)`;
        });

        menuContainer.addEventListener('touchend', () => {
            if (currentTranslate > menuWidth / 4) {
                currentTranslate = -menuWidth * (menuItems.length - 1);
            } else if (currentTranslate < -menuWidth / 4) {
                currentTranslate = 0;
            } else {
                currentTranslate = Math.round(currentTranslate / menuWidth) * menuWidth;
            }
            menuContainer.style.transform = `translateX(${currentTranslate}px)`;
        });
    </script>
</body>
</html>