js手机端菜单滑动

基础概念

JavaScript手机端菜单滑动是指在移动设备上通过触摸屏幕来实现菜单的左右滑动效果。这种效果通常用于提高用户体验，使得用户能够更直观地浏览和选择菜单项。

类型

水平滑动菜单：菜单项从左到右或从右到左滑动。
垂直滑动菜单：菜单项从上到下或从下到上滑动。
无限滑动菜单：用户可以不断滑动查看更多菜单项。

应用场景

电商应用：商品分类菜单。
社交应用：好友列表或动态浏览。
新闻应用：新闻分类或文章浏览。
设置页面：多级设置选项。

示例代码

以下是一个简单的水平滑动菜单的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>
        .menu-container {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .menu {
            display: flex;
            transition: transform 0.3s ease-in-out;
        }
        .menu-item {
            min-width: 100%;
            text-align: center;
            padding: 20px;
            background-color: #f0f0f0;
            border-right: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="menu-container" id="menuContainer">
        <div class="menu" id="menu">
            <div class="menu-item">Menu 1</div>
            <div class="menu-item">Menu 2</div>
            <div class="menu-item">Menu 3</div>
            <div class="menu-item">Menu 4</div>
        </div>
    </div>

    <script>
        const menuContainer = document.getElementById('menuContainer');
        const menu = document.getElementById('menu');
        let startX = 0;
        let currentTranslate = 0;
        let prevTranslate = 0;
        let animationID = 0;

        menuContainer.addEventListener('touchstart', touchStart);
        menuContainer.addEventListener('touchmove', touchMove);
        menuContainer.addEventListener('touchend', touchEnd);

        function touchStart(event) {
            startX = event.touches[0].clientX;
            cancelAnimationFrame(animationID);
        }

        function touchMove(event) {
            const currentX = event.touches[0].clientX;
            currentTranslate = prevTranslate + currentX - startX;
        }

        function touchEnd() {
            const movedBy = currentTranslate - prevTranslate;
            if (movedBy < -100 && prevTranslate > -menu.offsetWidth + menuContainer.offsetWidth) {
                currentTranslate -= menuContainer.offsetWidth;
            } else if (movedBy > 100 && prevTranslate < 0) {
                currentTranslate += menuContainer.offsetWidth;
            }
            prevTranslate = currentTranslate;
            setMenuPosition();
        }

        function setMenuPosition() {
            menu.style.transform = `translateX(${currentTranslate}px)`;
            animationID = requestAnimationFrame(setMenuPosition);
        }
    </script>
</body>
</html>