navigationStyle: "custom" 必须在 pages.json 中对应页面的 style 下配置,否则顶部必然留白;配了却未手写自定义导航组件则显示纯白板;H5/App 端还需清除 page 默认 margin/padding 并隐藏伪元素;电脑端需动态获取胶囊位置适配双导航栏。

navigationStyle: "custom" 没配或配错,顶部就必然留白
微信小程序里顶部空白,90% 是因为 navigationStyle: "custom" 没在 pages.json 里设对位置,或者只改了 navigationBarTitleText 这类样式字段。这些字段不碰 DOM 结构,导航栏容器还在,照样占位、照样 padding。必须在对应页面的 style 下加这一条:
-
"navigationStyle": "custom"—— 这是唯一能真正移除导航栏 DOM 的配置 - 不能写在根
style,必须写在pages数组中该页面对象的style里 - 不能写成
"navigationStyle": "default"或漏掉引号,JSON 格式错误会导致整个 style 失效
配完不生效?检查控制台是否报 pages.json parse error,或者用微信开发者工具「编译」后右键页面 →「查看页面结构」,确认 uni-nav-bar 节点是否还存在。
配了 custom 却没写自定义导航组件,顶部就是纯白板
微信小程序强制要求:一旦设了 navigationStyle: "custom",就必须自己实现一个导航栏组件,否则顶部区域没有任何 DOM,也没有交互能力,看起来就是一块死白。
- 不能只靠 CSS 隐藏原生导航栏——它根本没被渲染,你连 hide 都无从下手
- 必须在页面
<template>里手写一个<view class="custom-nav"></view>,并用uni.getSystemInfoSync().statusBarHeight动态撑高 - 别忘了给胶囊按钮留空间:调用
wx.getMenuButtonBoundingClientRect()获取右上角胶囊位置,再计算出导航栏总高度(状态栏 + 胶囊区域)
常见错误是写了组件但没设 position: fixed 或 top: 0,结果组件被内容流顶下去,看起来还是空的。
name wechat-article-writer-pro description 微信公众号文章完整生成技能(专业版)。输入主题即自动完成:信息调研、文章撰写(含章节配图)、5个备选爆款标题、封面图生成、带格式排版的DOCX文档输出。触发词:写公众号文章、生成公众号内容、做微信推文、公众号文章完整版。 agent_created true 微信公众号文章完整生成技能(专业版) 概述 本技能提供微信公众号文章从主题到成品的完整生成流程,在基础版之上增加:章节配图、DOCX 格式输出(含彩色重点文字和表格
H5 和 App 端也留白?page 元素默认 margin/padding 在作祟
navigationStyle: "custom" 在 H5 和 App 端生效后,<page> 会从 viewport 顶部开始渲染,但浏览器和 WebView 会给 body 或 page 加默认 margin/padding,框架还会注入伪元素占位。
- 必须在全局样式或页面样式里加:
page { margin: 0; padding: 0; } - 再加上:
page::before { display: none; }—— 干掉 uni-app 自动插入的占位伪元素 - iOS Safari 需要 JS 补状态栏高度:
document.documentElement.style.paddingTop = window.statusBarHeight + "px"(注意:安卓不支持window.statusBarHeight,得 fallback 为 0 或 UA 判断)
不加这两条,哪怕 navigationStyle 设对了,H5 页面顶部也会有 8px~44px 不等的不可见间隙。
电脑端微信小程序双导航栏导致的顶部空白
Windows/macOS 电脑端微信基础库 ≥3.6.1 后,如果没开自定义导航栏,系统会自动叠加一层原生导航栏;开了又没适配胶囊位置,就会出现「顶部被遮」「返回键重叠」或「莫名多出一段空白」。
- 检查基础库版本:在开发者工具右上角「详情」→「基础库版本」,确认是否 ≥3.6.1
- 必须用
wx.getMenuButtonBoundingClientRect()获取胶囊尺寸和位置,不能硬写固定 top 值 - PC 端需要拖拽区,顶部预留高度 ≠ 状态栏高度,而是胶囊上边界到屏幕顶的距离,这个值只能运行时取
这个空白不是代码漏写了,而是平台行为变了——2024 年底起所有新上线电脑端小程序都绕不开这一步,而且无法通过条件编译屏蔽。


















