uni-app详情页底部栏随滚动显示的正确方案是用自定义底部栏替代原生tabbar，通过onpagescroll监听滚动距离动态控制opacity和transform实现渐显效果，因原生tabbar无法动态平滑控制显隐。
uni-app 详情页底部栏随滚动显示，本质是“动态控制 tabBar 显示/隐藏”
uni-app 的原生 tabBar 默认固定在底部、不随页面滚动，但知乎类详情页需要：初始隐藏（沉浸式阅读），滚动一段距离后渐显，到底部时完全固定。这不是单纯 CSS 可控的，必须结合 onPageScroll + 动态样式 + 条件渲染实现。
为什么不能直接用 tabBar 配置项控制显隐
uni-app 的 tabBar 在 pages.json 中全局配置，运行时无法动态开关；hideTabBar 和 showTabBar API 只能整页切换，无法做滚动中平滑过渡。强行调用会导致闪屏、状态错乱，尤其在 iOS 上更明显。
-
hideTabBar(true)会立刻移除 tabBar，没有动画缓冲 - 滚动中频繁调用该 API 容易触发渲染抖动
- H5 和小程序平台对 tabBar 的 DOM 控制权限不同，兼容性差
正确做法：用自定义底部栏替代原生 tabBar
放弃原生 tabBar，改用一个绝对定位的 view 模拟底部栏，并通过 onPageScroll 实时计算透明度和位置。这是唯一能实现“滚动渐显+平滑过渡”的方案。
- 在页面
<template></template>底部插入自定义容器：<view class="custom-tabbar" :style="tabbarStyle">...</view> - 在
data中定义scrollTop: 0，并在onPageScroll(e)中更新：this.scrollTop = e.scrollTop - 用
computed或watch计算样式：tabbarStyle包含opacity、transform: translateY()等 - 关键阈值建议：
scrollTop 时完全透明且 translateY(100px)；<code>scrollTop >= 300时 opacity=1 且 translateY(0)
容易忽略的坑：iOS 滚动延迟与 fixed 定位失效
iOS 端 position: fixed 在 scroll-view 内或某些嵌套结构下会失效，导致自定义底部栏跟着内容一起滚动。必须确保它挂在页面根节点下，且父容器无 transform、overflow 等干扰属性。
- 不要把自定义 tabbar 放在
<scroll-view></scroll-view>内部 - 避免父级
view设置transform: translateZ(0)或will-change - 给自定义 tabbar 加
z-index: 999和bottom: 0，并确认其父容器是<page></page>直接子元素 - 真机调试时务必用 Safari Web Inspector 查看渲染层，而非仅依赖 HBuilderX 预览
真正难的不是写几行代码，而是让这个底部栏在 iOS 微信、支付宝、App 三端都保持一致行为——滚动监听精度、fixed 渲染层级、动画帧率，每处都要单独验证。别依赖“看起来差不多”，要逐端截图对比滚动 200px、400px、800px 时的 opacity 和 offset 值。
