uni-app中横向滚动Tab应优先使用scroll-view而非swiper，因其更稳定、无卡顿、可精准定位；需设width、white-space: nowrap、inline-block等样式，并用scrollIntoView实现居中滚动。
uni-app里用scroll-view做横向滚动Tab，别碰swiper
横向滚动导航在uni-app里最稳妥的方案就是scroll-view，不是swiper——后者本质是轮播组件，强行当Tab用会卡顿、无法精准定位、点击后自动回弹，尤其在iOS上表现极差。
常见错误现象：scroll-x设了但没动，或者手指一松就弹回原位；点某个Tab后视图没对齐，文字被截断；安卓正常，iOS上滚动条消失或拖不动。
-
scroll-view必须设置固定宽度（如width: 100%）和white-space: nowrap给内部view，否则子元素换行导致横向失效 - 每个Tab项用
display: inline-block或flex-shrink: 0，防止被压缩 - 滚动到指定位置要用
scrollIntoView方法（H5/小程序支持），而不是直接改scroll-left——后者在某些平台不触发重绘 - 真机调试时记得关掉“启用滚动区域优化”（HBuilderX → 运行 → 运行到手机或模拟器 → 设置），否则iOS下
scroll-view可能被拦截
如何让当前Tab自动居中并高亮
用户滑动后点某个Tab，既要滚动到位，又要视觉聚焦。靠CSS做不到自动居中，得结合scroll-view的scroll-into-view属性和动态计算。
使用场景：Tab数量多（比如10+个），屏幕只能显示3–4个，点击右侧Tab时需要平滑滚动过去，并让目标项居中显示。
- 给每个Tab加唯一
id（如tab-0、tab-1），绑定到scroll-into-view值上 - 不要用
offsetLeft算位置再设scroll-left——不同平台offsetLeft返回值不一致，且未考虑padding/margin - 高亮逻辑独立于滚动：用
current变量控制class，别和scroll-into-view耦合 - 如果Tab文字长度差异大，建议统一用
min-width+text-align: center，避免居中错位
滚动条隐藏但保留滚动能力的写法
设计稿通常要求“看不见滚动条，但能拖”，这不是靠show-scrollbar="false"就能解决的——这个属性只在App端有效，H5和微信小程序压根不认。
性能影响：强行用overflow: hidden包裹再嵌套一层可滚动容器，会导致iOS下touch事件穿透异常；用CSS隐藏又容易误伤其他滚动区域。
- H5端用CSS：
.scroll-view ::-webkit-scrollbar { display: none; }（仅Chrome/Safari） - 小程序端靠
scroll-view自带show-scrollbar，但必须配合scroll-x和white-space才生效 - App端（Vue2）需在
pages.json里给对应页面加"scrollIndicator": "none"，Vue3项目则要检查vue.config.js是否禁用了原生滚动 - 千万别用
pointer-events: none盖一层遮罩——会拦截所有点击
uni-app 3.x + Vue3 下ref调用scrollIntoView的坑
Vue3组合式API里用ref拿到scroll-view实例后，scrollIntoView方法在部分Android机型上无效，报错scrollIntoView is not a function。
根本原因：uni-app 3.6+ 对scroll-view做了异步渲染封装，ref初始值是null，且组件挂载后DOM节点未必ready。
- 必须用
onMounted+nextTick双重等待，确保节点已插入文档流 - 调用前先判空：
if (scrollViewRef.value && scrollViewRef.value.scrollIntoView) - 目标元素
id不能含特殊字符或纯数字开头（如id="1-tab"在iOS下会被忽略） - 如果用
v-for生成Tab，key必须和id严格一致，否则scrollIntoView找不到目标
复杂点在于：滚动行为本身受平台限制，iOS Webview对scroll-behavior: smooth支持有限，H5端若需平滑过渡，得自己用animate或requestAnimationFrame补帧——但多数业务场景没必要，原生滚动更稳。
