用 touch 事件实现标签页左右滑动需手动控制 transform: translateX()，禁用默认滚动，通过 touchstart/touchmove/touchend 精确计算目标页并同步按钮状态与内容显示，同时处理 iOS 兼容性、焦点管理和动画过渡。
怎么用 touch 事件给标签页加左右滑动手势
纯靠点击切换标签页在移动端体验割裂，必须补上左右滑动。核心不是“模拟 Swiper”，而是让手势和按钮状态严格同步——滑到哪页，对应按钮就高亮，内容区就显示哪块。
关键限制是：不能干扰页面正常上下滚动，也不能让标签页容器自己横向滚动（否则 touchmove 会被系统吞掉）。所以得用 transform: translateX() 手动控制内容区位移，而不是依赖 overflow-x: auto。
- 所有标签页内容区用
position: absolute叠在一起，宽度设为100vw，父容器设overflow: hidden - 初始时当前页
transform: translateX(0)，其他页分别设translateX(-100%)和translateX(100%) -
touchstart阶段第一行就必须写e.preventDefault()，否则 iOS Safari 会直接触发页面缩放或上下滚 - 记录
e.touches[0].pageX（不是clientX），touchmove中只算水平位移差，且仅当|Δx| > |Δy| × 1.5才更新transform，防误触
为什么不能直接给 tab 容器加 touchmove 滚动
常见错误是把标签页内容区包进一个 div，然后给它加 overflow-x: auto 和 touch-action: pan-y，指望手指一划就切页。这行不通，因为：
- 浏览器对
overflow-x: auto容器的 touch 处理优先级低，尤其在 iOS 上，touchmove很可能根本没触发就被系统截断 - 即使能滚动，你也拿不到精确的“停在哪一页”，
scrollLeft值受缩放、subpixel 渲染影响，四舍五入后仍可能卡在两页之间 - 无法同步按钮状态：
scroll事件不带页码信息，你得自己算当前偏移除以100vw，再取整——但快速滑动时scroll会节流，状态滞后 - 更麻烦的是，如果内容区里有可滚动子区域（比如长列表），
pan-y会禁用它的上下滚，用户体验反而变差
滑动结束怎么精准对齐并更新按钮状态
松手瞬间不能只看位移，还得结合速度判断是回弹还是切换。别用固定阈值（如“滑过 50px 就切”），容易在慢速拖拽时误判。
立即学习“前端免费学习笔记（深入）”；
实操建议用两个变量：当前页索引 currentIndex 和目标页索引 targetIndex。松手时按以下逻辑算：
- 计算最终位移
finalX = currentX + velocityX * decayFactor（decayFactor 可设 0.8～1.2，简单估算即可） - 推导目标页：
targetIndex = Math.round(currentIndex - finalX / window.innerWidth) - 边界检查：
targetIndex = Math.max(0, Math.min(totalTabs - 1, targetIndex)) - 执行动画：
tabContainer.style.transform = `translateX(${-targetIndex * 100}vw)` - 立刻同步按钮：
document.querySelectorAll('[data-tab]').forEach((btn, i) => btn.setAttribute('aria-selected', i === targetIndex))
注意：动画必须用 transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 写在内容区元素上，别写在父容器；且动画结束后要监听 transitionend，清理临时 class 或重置 currentIndex，否则连点会错乱。
移动端必须处理的三个兼容性坑
iOS Safari 和部分 Android WebView 对 touch 事件拦截极严，漏掉任一环节，手势就失效。
-
touchstart必须加{ passive: false }，否则preventDefault()在 Chrome 88+ 之后会被忽略 - 容器要加
touch-action: pan-y，但不能加在body或html上，否则全局手势失灵；应精确加在标签页内容区父容器上 - 必须监听
touchcancel，iOS 在状态栏附近松手、或系统弹出通知时会触发它，不处理会导致currentIndex卡死、后续滑动错位
最易被忽略的是：手势切换后，焦点不会自动落到新页的内容区。如果页内有表单或可聚焦元素，得手动调用 focus()，否则键盘打不开。
