淘宝详情页底部操作栏不能用官方custom-tab-bar组件，因其仅支持h5端，微信小程序、app原生渲染及鸿蒙等端不渲染且无报错；需手动适配安全区、滚动联动与键盘弹出等真实场景。
淘宝详情页底部操作栏不是 tabBar，而是独立于页面滚动、固定在安全区上方、随页面内容联动变化的自定义组件。它不参与 tab 切换，只负责当前页的操作入口（如“加入购物车”“立即购买”），且需适配 iOS/Android 安全区、滚动偏移、鸿蒙 fallback 等真实问题。
为什么不能用 custom-tab-bar 组件
官方 custom-tab-bar 仅支持 H5，微信小程序、App（原生渲染）、鸿蒙等端直接不渲染——你写好了，真机上就是空白。它本质是平台黑盒组件，不是通用 DOM 层实现。很多开发者卡在这里反复检查样式和 props，却忽略兼容性声明里白纸黑字写着“仅 H5 支持”。
-
custom-tab-bar在微信小程序中静默失效，控制台无报错、无警告 - App 端若开启原生渲染（默认），
custom-tab-bar的z-index和事件层会被系统 tabBar 拦截或遮挡 - 它无法响应页面滚动状态（如淘宝的“悬浮吸顶→固定底部→随页滚动消失”）
必须手动计算 bottom 值并 fallback 安全区
不能只写 bottom: 0 或依赖 env(safe-area-inset-bottom) —— 鸿蒙返回 0，部分安卓机型 safeArea.bottom 不准确，iOS 在横屏或弹出键盘时会动态变化。
- 首次获取：用
uni.getSystemInfoSync()计算screenHeight - safeArea.bottom，存为全局变量（如getApp().globalData.tbBottom） - 运行时监听：在页面
onPageScroll中根据scrollTop动态调整组件transform: translateY()或显隐状态 - fallback 写死：CSS 中必须带
padding-bottom: 34px（iOS 最小安全距）或padding-bottom: 20px（安卓常见值），避免env()失效后被截断
凸起按钮或浮动操作入口必须用 absolute + fixed 组合
淘宝详情页中间那个“立即购买”按钮，视觉上凸出、居中、不随页面滚动——靠 margin-top 或 transform: translateY() 在真机上会漂移，尤其在页面滚动或键盘弹出时。
- 父容器设
position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom, 34px); - 凸起按钮单独抽离为子元素，设
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; - 禁止对凸起按钮使用
margin-bottom或top定位——这些值在滚动或键盘弹出时无法重算，会导致位置错乱
滚动联动逻辑要自己接管，别依赖 onShow/onLoad
淘宝详情页底部栏会在滚动到一定距离后“吸顶固定”，再往下拉又“沉底固定”，这个行为必须实时响应 onPageScroll，而不是靠页面生命周期钩子触发一次。
- 在详情页
onPageScroll({ scrollTop })中判断临界点（如scrollTop > 800）来切换按钮组显隐或 class - 不要在
onShow里调用uni.hideTabBar()来“模拟”——这会干扰原生 tabBar，且 H5 端无效 - 如果页面用了下拉刷新或上拉加载，注意
scrollTop可能为负值，需加Math.max(0, scrollTop)过滤
最易被忽略的是：滚动过程中 env(safe-area-inset-bottom) 不会自动更新，但键盘弹出会改变视口高度，此时必须监听 keyboardheightchange 事件重新计算 bottom 值——否则凸起按钮会被键盘顶飞。这不是理论风险，是 iOS 真机必现的问题。
