根本原因是navigationStyle设为"custom"仅禁用原生导航栏，不自动预留状态栏空间；需在页面根容器加padding-top:var(--status-bar-height)（App端）或动态插入status-bar占位view（小程序端），并下拉时临时禁用透明以避免穿透。
页面内容滑进状态栏，根本不是样式没加够，而是状态栏高度没被正确预留——尤其在 navigationStyle 设为 "custom" 后，uni-app 交出控制权，但不会自动帮你“腾地方”。
为什么 custom 模式下内容会顶到状态栏里
设了 "navigationStyle": "custom" 只是让原生导航栏消失，iOS/Android 状态栏依然存在，且系统不自动给页面留空。小程序端最明显：第一行文字直接被信号图标盖住；App 端真机上常表现为顶部内容被裁切或发虚。
- 微信小程序：不提供
--status-bar-height变量，uni.getSystemInfoSync().statusBarHeight返回值可靠，但必须手动用到样式中 - App 端：优先用 CSS 变量
var(--status-bar-height)，它由 uni-app 运行时注入，已适配刘海屏/全面屏 - H5 端：状态栏不属于页面控制范围，一般无需处理；若需模拟全屏，用
env(safe-area-inset-top)
怎么给内容区正确留出状态栏空间
别写死 padding-top: 20px 或 44px，不同机型、系统、横竖屏下状态栏高度差异极大。关键动作是动态注入高度并应用。
- 在
pages.json对应页面的style中确保"navigationStyle": "custom" - 页面根容器（如
<view class="page">）加padding-top: var(--status-bar-height)（App 端）或padding-top: calc(var(--status-bar-height, 20px) + 44px)（兼顾 fallback） - 小程序端更稳妥：在页面
<template>最上方插入空<view class="status-bar"></view>，CSS 设height: {{ statusBarHeight }}px，并在onLoad里取uni.getSystemInfoSync().statusBarHeight - 避免用
margin-top—— 它可能被父容器overflow: hidden截断，尤其在 scroll-view 包裹时
下拉刷新时内容穿透状态栏怎么办
开启 "enablePullDownRefresh": true 后，webview 整体下拉，透明导航栏下的内容就直接滑进状态栏区域，安卓尤为明显：状态栏变黑、闪烁、文字重叠。
- 不要试图靠 JS 动态改
padding-top抵消——时机难控，且刷新结束时容易残留错位 - 真解法是“行为隔离”：下拉中临时禁用透明效果，比如给导航栏加
:class="{ 'nav-fixed': isPulling }"，配合onPullDownRefresh和stopPullDownRefresh控制开关 - 如果用了
uni-nav-bar，记得显式设background-color="transparent"，否则即使加了 padding，视觉上仍像“没留空” - 真机调试务必用正式打包的 IPA/APK，HBuilderX 模拟器对状态栏渲染有偏差，测不准
最易被忽略的一点：自定义导航栏不是加个 padding-top 就完事。它必须和页面滚动容器、下拉刷新、软键盘弹出、横竖屏切换全部对齐——任何一个环节没约束好，状态栏区域就会变成内容“漏斗”。
