移动端可拖拽滑动Tabs代码失效，请求故障排查与修复

核心问题梳理 #

你的代码有几个关键问题导致功能失效：

• 初始data-tab属性缺失，且按钮索引与CSS定位规则不匹配（按钮index从0开始，但CSS里[data-tab='1']才对应第一个内容）
• 触摸事件中touchStartX、touchEndX未声明，变成全局变量易引发异常
• 滑动逻辑无边界控制，会出现超出tab范围的无效索引
• CSS中.tabs的绝对定位与.inliner的横向排列样式冲突
• 按钮active类无可视化样式，无法区分选中状态

修复后的完整代码 #

HTML

<div class="wrapper">
    <button class="active"> Tab 1</button>
    <button> Tab 2</button>
    <button> Tab 3</button>
    <div id="tab" class="tabs" data-tab="0">
        <div>
            <h2>Content 1</h2>
        </div>
        <div>
            <h2>Content 2</h2>
        </div>
        <div>
            <h2>Content 3</h2>
        </div>
    </div>
</div>

CSS

.wrapper {
    overflow: hidden;
    max-width: 100%;
}

/* 按钮基础样式 */
button {
    padding: 8px 16px;
    border: none;
    background: #f0f0f0;
    cursor: pointer;
    margin-right: 4px;
}
/* 按钮激活状态 */
button.active {
    background: #2196F3;
    color: white;
}

.tabs {
    width: 300%; /* 3个tab，每个占100%宽度，总宽度设为300% */
    height: 200px;
    display: flex;
    transition: all .3s ease-in-out; /* 缩短过渡时间提升滑动流畅度 */
}

.tabs > * {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
}

/* 匹配从0开始的tab索引 */
.tabs[data-tab='0'] {
    transform: translateX(0);
}

.tabs[data-tab='1'] {
    transform: translateX(-33.333%);
}

.tabs[data-tab='2'] {
    transform: translateX(-66.666%);
}

JavaScript

const btn = Array.from(document.getElementsByTagName('button'));
const tabContainer = document.getElementById('tab');
const tabCount = btn.length;

// 按钮点击逻辑
btn.forEach((item, index) => {
    item.addEventListener('click', function() {
        btn.forEach(el => el.classList.remove('active'));
        this.classList.add('active');
        tabContainer.setAttribute('data-tab', index);
    });
});

// 触摸事件变量声明
let touchStartX = 0;

// 检测触摸支持并绑定事件（仅给tab容器绑定，避免全局干扰）
if ('ontouchstart' in window) {
    tabContainer.addEventListener('touchstart', handleTouchStart, false);
    tabContainer.addEventListener('touchmove', handleTouchMove, false);
}

function handleTouchStart(event) {
    const touch = event.touches[0];
    touchStartX = touch.pageX;
}

function handleTouchMove(event) {
    // 阻止页面滚动干扰滑动操作
    event.preventDefault();
    
    const touch = event.touches[0];
    const touchEndX = touch.pageX;
    const diffX = touchStartX - touchEndX;

    // 滑动距离超过50px才触发切换
    if (Math.abs(diffX) > 50) {
        const currentTab = parseInt(tabContainer.getAttribute('data-tab'));
        let nextTab = currentTab;
        
        // 左滑切换到下一个tab（需确保不是最后一个）
        if (diffX > 50 && currentTab < tabCount - 1) {
            nextTab += 1;
        } 
        // 右滑切换到上一个tab（需确保不是第一个）
        else if (diffX < -50 && currentTab > 0) {
            nextTab -= 1;
        }
        
        // 更新tab容器和按钮状态
        tabContainer.setAttribute('data-tab', nextTab);
        btn.forEach(el => el.classList.remove('active'));
        btn[nextTab].classList.add('active');
        
        // 重置起始位置，避免单次滑动连续触发多次切换
        touchStartX = touchEndX;
    }
}

关键修改说明 #

1. 索引匹配：将data-tab改为从0开始，与按钮索引对应，用transform: translateX替代left实现位移，布局更灵活
2. 触摸事件优化：
   • 仅给tab容器绑定触摸事件，避免全局监听干扰页面其他元素
   • 添加event.preventDefault()阻止页面滚动影响滑动操作
   • 增加边界判断，禁止滑出tab范围
   • 滑动后自动同步按钮的激活状态
3. CSS重构：
   • 使用flex布局实现tab内容横向排列，移除冲突的.inliner样式
   • 补充按钮激活样式，明确当前选中状态
   • 缩短过渡动画时间，提升滑动流畅度
4. 变量修复：声明触摸事件相关变量，避免全局变量引发的潜在bug

内容的提问来源于stack exchange，提问作者Rifosa