结论：用swiper替代scroll-view实现横向导航栏最稳定，禁用手动滑动仅靠current控制，内容区独立切换并保存scrollTop，下拉刷新改用refresher-enabled，吸顶需监听scrollTop动态控制。
uni-app里用scroll-view做横向导航栏卡顿？别硬扛
直接说结论：原生scroll-view在iOS上滑动不跟手、安卓偶现跳帧，不是你代码写错了，是它默认没开硬件加速 + 滚动事件节流太松。真正稳的方案是用swiper模拟导航栏，配合current和scrollable控制联动。
常见错误现象：scroll-view加了scroll-x后手指一松就回弹、快速滑动时标签错位、切换tab后位置丢失；根本原因是它把滚动当“普通DOM滚动”处理，而导航栏本质是“离散选项切换”，不该依赖连续滚动精度。
- 用
swiper替代scroll-view，设置scrollable="false"禁用手动滑动，只靠current控制高亮项 - 导航项用
swiper-item包裹，每个item内放一个text或view，宽度固定（比如width: 120rpx），避免自适应导致计算偏差 - 监听
swiper的@change事件，拿到detail.current去更新当前tab索引，再触发内容区切换 - 如果必须支持手指滑动切换导航（非点击），则开启
scrollable="true"，但务必加disable-programmatic-animation="true"，否则js调用setCurrent时会和手势冲突
内容区怎么和导航栏联动？别用v-for直接套swiper
很多人把内容页也塞进同一个swiper，结果导航栏一动，下面内容跟着滑——这不是联动，是耦合。内容区应该独立，靠current值驱动显示/隐藏，而不是靠swiper滚动。
使用场景：今日头条式“下拉刷新+上拉加载”每栏内容，每栏数据源不同，且需保持各自滚动位置（比如A栏看到第5条，切到B栏再切回来，A栏还得停在第5条）。
- 导航栏用一个
swiper（仅控制高亮），内容区用view+v-if或visibility: hidden切换，不要共用swiper实例 - 每个内容栏用
scroll-view而非list，因为list在uni-app里兼容性差，iOS易白屏，且无法精确控制滚动位置 - 保存滚动位置的关键是：离开某栏前，用
scroll-view的scrollTop存到data里；进入该栏时，用scroll-into-view或scroll-top属性还原（注意：还原要在$nextTick后执行，否则DOM未渲染） - 别在
onReachBottom里直接发请求，先判断isloading状态，uni-app的scroll-view在快速滚动时可能连续触发多次
安卓低端机上导航文字被截断？检查white-space和flex组合
不是字体大小问题，是swiper-item里文字默认white-space: nowrap，但父容器display: flex又没设flex-shrink: 0，导致在低分辨率安卓机上被强制压缩。
参数差异：iOS对flex收缩容忍度高，安卓（尤其旧版webview）会优先缩文字而不是撑容器；uni-app编译成App时用的是系统webview，不是Chrome内核。
- 给每个导航
swiper-item加style="flex-shrink: 0;"，禁止收缩 - 文字外层包一层
text，并加style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"，确保截断逻辑可控 - 避免用
width: 20%这种百分比定宽，改用width: 140rpx（实测140rpx在主流屏下能放下6–7个字），再用justify-content: space-between做间隔 - 真机调试时打开
uni-app的debug模式，在控制台看元素computed样式，重点查flex-basis是否被重写
下拉刷新和分栏怎么共存？pullDownRefresh只对页面顶层生效
uni-app的pullDownRefresh是页面级能力，一旦启用，整个页面都会响应下拉，但内容区是scroll-view，它自己不触发onPullDownRefresh——所以你会看到：下拉时顶部出现刷新动画，但内容区没反应，松手后也不刷新。
性能影响：如果在scroll-view里监听touchstart/touchmove自己实现下拉，会严重干扰原生滚动体验，且iOS上大概率触发“橡皮筋回弹”误判。
- 关闭页面级
pullDownRefresh，改用scroll-view的refresher-enabled属性（uni-app 3.0+ 支持），它才是专为scroll-view设计的下拉组件 -
refresher-enabled必须配合refresher-triggered使用，后者为true时才显示下拉动画，刷新完要手动设回false - 每个分栏的
scroll-view都要单独控制自己的refresher-triggered状态，不能全绑到同一个data字段，否则A栏下拉会误触发B栏刷新 - 如果目标平台包括微信小程序，注意
refresher-enabled在微信基础库2.12.2以下不支持，得降级为顶部view+transform: translateY模拟
最麻烦的其实是滚动吸顶：导航栏要随着内容区滚动到顶部时固定。这个看似简单，但position: sticky在uni-app各端表现不一，iOS真机常失效，最终得靠监听scroll-view的scrollTop + 动态top值来硬控——细节多，但只要记住：吸顶逻辑必须和内容区scroll-view强绑定，不能依赖页面onPageScroll。
