移动端标签页切换应优先使用 click 事件 + class 控制，避免 touchstart/touchmove 手动模拟滑动；需用 button 元素、hidden 属性配合 opacity/visibility 过渡动画，并严格设置 touch-action 以保障手势行为正确。
移动端标签页切换，别用原生 touchstart/touchmove 手动模拟滑动切换——iOS Safari 极易误触发“拖拽退出页面”，且和系统滚动冲突，实际体验比点击还差。
用 click 事件 + class 切换最稳
移动端手指点击精度足够，click 在现代浏览器中已无 300ms 延迟（只要没禁用 viewport 缩放），响应快、逻辑清、无障碍友好。
- 每个标签按钮用
，防止意外触发表单提交 - 按钮加
data-tab="profile"，对应内容区设id="panel-profile"和初始hidden - 首次加载必须手动移除默认面板的
hidden，否则白屏 - 切换时统一执行：
document.querySelectorAll('.tab-panel').forEach(p => p.hidden = true)，再设目标p.hidden = false
加淡入淡出动画要同时控制 opacity 和 visibility
只改 opacity 会导致不可见元素仍占布局、可被聚焦或读屏器读取；只用 display: none 则无法过渡。必须配对使用。
- 给内容容器加
transition: opacity 0.25s ease, visibility 0.25s - 隐藏状态写
opacity: 0; visibility: hidden，显示状态写opacity: 1; visibility: visible - 绝对不要在
transition中混用transform和opacity，可能触发重排导致卡顿 - 用
class控制状态（如.tab-panel.active），别直接操作el.style.opacity，避免样式逻辑和 JS 耦合
想做左右滑动？用 transform + touch-action 更可靠
真要滑动，就彻底接管位移，别试图“增强 click”。核心是禁用浏览器默认横向行为，并用 transform 驱动，不依赖滚动。
- 容器必须设
touch-action: pan-y（禁止横向默认滚动），否则touchmove会被拦截 -
touchstart回调第一行就要e.preventDefault()，不能加条件判断 - 记录
e.touches[0].pageX（不是clientX），touchmove中实时计算偏移并更新transform: translateX() - 松手后按位移阈值（如 >50px）决定是否切页，不足则回弹；别依赖
scrollLeft或scrollBy，它们在 iOS 上行为不稳定
最容易被忽略的是：所有触屏交互都必须考虑 touch-action 的取值，它直接决定浏览器是否接管手势。设错一个 none，按钮点不动；漏设 pan-y，滑动就和页面滚动打架。这不是锦上添花，而是触屏适配的底层开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
