scroll-view 横向导航栏跨端不稳定，根本原因是其连续滚动机制与离散导航需求不匹配；推荐用 swiper + view 组合实现点击/滑动双同步，并动态计算吸顶高度确保多端一致。
直接用 scroll-view 做横向导航栏，iOS 卡顿、安卓点击失灵、小程序里还可能和下拉刷新冲突——这不是你代码问题，是组件定位机制不匹配。
为什么 scroll-view 横向滚动 Tab 栏总出问题
常见错误现象包括：滑动生硬没惯性、松手后不自动对齐、点击某项后视图跳到错误位置、tab 文字被压缩换行、动态渲染后 scroll-into-view 失效。
根本原因是：scroll-view 是为「连续滚动」设计的，而导航栏本质是「离散选项」。它没有原生的“滑动停止后吸附到最近一项”的能力，各端实现差异又大，靠 CSS scroll-snap 或 JS 计算滚动距离兜底，稳定性极差。
- 必须加
scroll-x="true"和white-space: nowrap（通过 class 控制子元素） - 每个 tab 项必须设固定
width或flex-shrink: 0，否则scroll-into-view定位偏移 - 不要在
scroll-view上直接监听bindscroll更新当前索引——节流没做好就会抖动 - 推荐改用
scroll-left + getBoundingClientRect()计算可视区域中心点来判断高亮项
swiper + 点击事件双向绑定才是稳定解法
真正能跨端稳定的方案，是把导航栏做成普通 view，用 swiper 承载内容区，再靠 current 和事件联动实现点击/滑动双同步。
- 给
swiper设:current="currentIndex"并绑定@change="onSwiperChange"，回调里更新currentIndex和 tab 激活态 - 每个 tab 项绑定
@tap="switchTab(index)"，里面直接赋值this.currentIndex = index，swiper会自动滚动过去 - 如果 tab 是
v-for动态生成的，确保key唯一且稳定，否则current变更时视图可能错位 - 避免把 tab 栏本身塞进
swiper-item——吸顶或高亮逻辑会混乱
吸顶导航栏必须手动监听滚动，不能依赖 position: sticky
position: sticky 在微信/支付宝/百度小程序里完全不生效，H5 端也要求父容器有明确高度且不能设 overflow: hidden，实际项目中基本等于不可用。
- 把导航栏包裹在普通
view中，用scroll-view包裹整个内容区 - 监听其
bindscroll事件，读取detail.scrollTop，与导航栏原始offsetTop比较，动态设置isSticky数据字段 - 务必在
onReady或$nextTick后获取offsetTop，否则可能为 0 - fixed 元素会脱离文档流，必须在原位置放一个等高占位
view，否则页面会“抖一下” - 节流不能省：
requestAnimationFrame或 16ms 间隔，避免低端机setData频繁触发卡顿
吸顶高度偏移与多端一致性最容易被忽略
吸顶后，下方内容会向上顶，导致锚点跳转偏移、滚动位置错乱。最常被忽略的是：吸顶栏高度 必须和占位 view 高度严格一致，且这个值不能写死在 JS 里——不同机型状态栏、导航栏高度不同，必须用 uni.getSystemInfoSync() 动态计算，再结合 px2rpx 转换后设置。
