uni-app怎么使用scroll-view uni-app局部滚动组件避坑指南：详解

scroll-view 不滚动是因为未设置显式高度或宽度；横向滚动点击不准因 scroll-left 只认 px 且需 DOM 渲染后计算；下拉刷新需 refresher-enabled、refresher-triggered 绑定及 @refresherrefresh 配合；平台差异需分别处理回弹和滚动条。

scroll-view 不滚动？先看它有没有“地盘”

scroll-view 不是普通 view，它不会自动撑开，也不会继承父容器高度。你写了 scroll-y，但没给它明确的高度，它就真的一动不动——不是 bug，是设计如此。

• 必须显式设置高度（纵向）或宽度（横向），不能依赖 flex: 1 或 100vh 自动计算，尤其在嵌套 flex 布局里，父容器若没定高，flex: 1 就会算成 0
• 推荐用 rpx 或固定 px 写在 :style 或 class 里，比如 :style="{ height: '800rpx' }"
• 调试时加个临时 background: #f0f，一眼看出它实际占多大区域；如果只是一条线，说明尺寸没生效

横向滚动 tabs 点击不准？scroll-left 单位和时机是关键

scroll-left 只认 px，但你在样式里写的可能是 200rpx。直接把 rpx 值赋给 scroll-left，iOS 可能勉强动一下，Android 基本没反应。

• 动态计算每个 tab 的真实像素宽度：用 uni.createSelectorQuery() 获取 boundingClientRect，再结合 uni.getSystemInfoSync().screenWidth 换算 rpx→px
• 切换 tab 时，确保 DOM 已渲染完成再调用滚动，否则获取的宽度为 0；可在 $nextTick 或 setTimeout(..., 0) 中执行
• 记得开启 scroll-with-animation，否则滚动是瞬移，体验极差

下拉刷新 refresher 不触发？三个属性必须同时在线

refresher-enabled 单独开没用，它只在 scroll-y 为 true 时才激活，且严重依赖 refresher-triggered 的响应式绑定。

• 缺少 :refresher-triggered="isRefreshing"，下拉动作完成后状态无法重置，下次就再也拉不动了
• @refresherrefresh 触发后，必须手动设 isRefreshing = true，请求结束后再设回 false，否则刷新动画卡住
• 小程序端对 refresher-default-style 支持有限，自定义箭头建议用图片 + CSS transform，别强求改颜色

iOS 回弹、安卓滚动条露出来？平台差异得单独处理

iOS 的“橡皮筋”和 Android 默认显示滚动条，是原生行为，scroll-view 封装层无法一招屏蔽。

• iOS 上禁用回弹：加 enable-back-to-top="false"（仅 App 端有效），H5 和小程序仍需 CSS hack（如 overscroll-behavior: none，但兼容性差）
• 安卓隐藏滚动条：目前无标准属性，稳妥做法是用 scroll-x/scroll-y + style="overflow: hidden" 包一层外容器，再让内部 scroll-view 滚动
• 所有平台都建议关掉 show-scrollbar（H5 无效，但小程序和 App 端可生效）

真正麻烦的从来不是写几行代码，而是同一套逻辑在三个平台跑出三种结果——而这些差异，往往藏在 scroll-view 渲染完成前的那几十毫秒里。