下滑时隐藏底部栏、上滑时显示，通过 scroll-view 的 bindscroll 事件监听 scrollTop 变化，节流处理并对比 lastScrollTop 判断方向，避免滚动停顿误判和快速滑动抖动。
uni-app 中如何监听滚动方向并控制底部栏显隐
直接用 scroll-view 的 bindscroll 事件配合节流和方向判断就能实现，不需要引入第三方库。关键不是“怎么动”，而是“什么时候动”——滚动停顿间隙的误判、快速来回滑动时的状态抖动，才是实际开发中最常卡住的地方。
核心逻辑是记录上一次滚动位置 lastScrollTop，对比当前 scrollTop，再结合节流避免频繁触发：
- 下滑（
scrollTop > lastScrollTop）→ 隐藏底部栏 - 上滑（
scrollTop ）→ 显示底部栏 - 必须加节流（推荐 50ms），否则 iOS 下
bindscroll会高频触发，导致状态反复切换 - 初始化时设
lastScrollTop = 0，首次下滑才生效；若页面带初始滚动偏移，需在onReady中主动读取scroll-top
为什么不能只靠 scrolltolower 和 scrolltoupper
这两个事件只在滚动到底/顶时触发，完全无法捕获中间过程的方向变化。知乎详情页那种“稍微往上一拽就弹出底部栏”的体验，必须依赖持续的 bindscroll 监听，而不是边界事件。
常见错误是混淆用途：scrolltolower 适合加载更多，scrolltoupper 适合回到顶部，但它们对“方向感知”毫无帮助。
-
scrolltolower触发时，用户可能刚从底部快速上滑又停下，此时底部栏应显示，但它不会告诉你方向 - 某些安卓 WebView 对
scrolltoupper响应延迟严重，甚至不触发，导致顶部逻辑失效 - 真机调试时发现：iOS 的
bindscroll在惯性滚动结束前就停止派发，需配合setTimeout延迟判定“滚动已停止”
uni-app 条件编译下 iOS/Android 行为差异怎么处理
Android 端 scroll-view 滚动更“硬”，scrollTop 变化连续；iOS 则有弹性滚动和回弹，scrollTop 在回弹阶段会反向变化（比如上滑后松手，视图回弹导致 scrollTop 先减后增），直接比大小会误判方向。
知乎数据获取 - 极简设计，支持三级认证降级（Browser Profile → File Cookie → Fallback），确保数据可靠获取 Zhihu Data Fetcher - Minimalist design with three-level auth fallback (Browser Prof...
解决办法是加一个“滚动结束”标记：
- 每次
bindscroll触发时，清除上一个setTimeout，设置新定时器（如 100ms） - 定时器内认为滚动已停止，此时再记录最终
scrollTop并更新方向状态 - 节流 + 停止判定双保险，能覆盖 iOS 回弹、Android 快速滑动等场景
- 不要依赖
event.detail.direction（H5 有效，App 端多数不支持或返回空字符串）
底部栏显隐的 DOM 控制和性能注意点
用 v-if 或 v-show 控制底部栏渲染，但要注意：如果底部栏含复杂组件（如带图标、badge 的 tabbar），v-if 频繁切换会导致重绘开销；而 v-show 虽然快，但元素始终在 DOM 中，可能影响滚动区域计算。
推荐方案是用 class 控制 visibility + transform：
- 定义两个 class：
.tabbar--hidden { transform: translateY(100%); }和默认样式 - 绑定
:class动态切换，避免重排（transform是合成层操作） - 务必给底部栏加
position: fixed和z-index，否则在某些机型上会被内容遮挡 - 如果使用
uni-tabbar，它不支持动态隐藏，得自己写一个轻量级底部栏组件
最易被忽略的是：滚动容器必须是 scroll-view，且明确设置 height 或 max-height，否则 bindscroll 在 App 端根本不会触发——这是 uni-app 的老坑，文档里没明说，但实测无高度则无滚动事件。
