jquery手机滑动切换tab

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在移动设备上，滑动切换 tab 是一种常见的交互方式，它可以提供更加流畅和直观的用户体验。

类型

滑动切换 tab 可以分为以下几种类型：

水平滑动：用户通过左右滑动来切换不同的 tab。
垂直滑动：用户通过上下滑动来切换不同的 tab。
触摸滑动：基于触摸事件实现的滑动切换。

应用场景

滑动切换 tab 常见于移动应用和响应式网站，特别是在以下场景：

移动端导航：在移动设备上，滑动切换 tab 可以提供更加直观和便捷的导航体验。
内容展示：在需要展示多个页面内容的场景中，滑动切换 tab 可以帮助用户快速浏览不同内容。

示例代码

以下是一个简单的 jQuery 水平滑动切换 tab 的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 滑动切换 Tab</title>
    <style>
        .tab-container {
            display: flex;
            overflow: hidden;
        }
        .tab-item {
            flex: 1;
            padding: 20px;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <div class="tab-item active">Tab 1</div>
        <div class="tab-item">Tab 2</div>
        <div class="tab-item">Tab 3</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let startX, currentX, isDragging = false;

            $('.tab-container').on('touchstart', function(event) {
                startX = event.originalEvent.touches[0].clientX;
                isDragging = true;
            });

            $('.tab-container').on('touchmove', function(event) {
                if (!isDragging) return;
                event.preventDefault();
                currentX = event.originalEvent.touches[0].clientX;
            });

            $('.tab-container').on('touchend', function() {
                if (!isDragging) return;
                isDragging = false;
                const deltaX = currentX - startX;
                const tabWidth = $('.tab-item').first().outerWidth();
                const currentIndex = $('.tab-item.active').index();

                if (Math.abs(deltaX) > tabWidth / 2) {
                    if (deltaX > 0 && currentIndex > 0) {
                        $('.tab-item').eq(currentIndex).removeClass('active');
                        $('.tab-item').eq(currentIndex - 1).addClass('active');
                    } else if (deltaX < 0 && currentIndex < $('.tab-item').length - 1) {
                        $('.tab-item').eq(currentIndex).removeClass('active');
                        $('.tab-item').eq(currentIndex + 1).addClass('active');
                    }
                }
            });
        });
    </script>
</body>
</html>