微信小程序胶囊按钮位置必须动态计算，其坐标以屏幕左上角为原点；自定义导航栏高度正确公式为：navbarheight = menubuttoninfo.bottom + menubuttoninfo.top - statusbarheight。

微信小程序的胶囊按钮不能“自定义”，只能避让和对齐——它始终是系统级控件，navigationStyle: custom 只是交出导航栏绘制权，不包括胶囊本身。真正要做的，是动态计算它的位置，让自定义内容不被遮挡、视觉上自然对齐。

uni.getMenuButtonBoundingClientRect() 返回值怎么用

这个 API 是唯一可靠来源，返回对象如 {top: 24, bottom: 56, left: 230, right: 317, width: 87, height: 32}。所有坐标都是以屏幕左上角为原点（0,0），单位 px。

• top 和 bottom 是胶囊上下边距屏幕顶部的距离，不是相对于状态栏
• statusBarHeight 来自 uni.getSystemInfoSync().statusBarHeight，必须和 top 同时使用才能算出胶囊与状态栏之间的空隙
• right 值减去屏幕宽度 windowWidth，可得胶囊右侧到屏幕右边缘的距离（实测多为 7px 左右，但不可硬编码）
• 在 onLoad 或 onMounted 中调用，避免 SSR 或生命周期时机错误导致返回 null

导航栏总高度怎么算才不踩坑

常见错误是直接写死 88rpx 或套用 “状态栏 + 44px” 公式。实际应按胶囊上下边界动态推导：

微信公众号文章生成技能（专业版）

name wechat-article-writer-pro description 微信公众号文章完整生成技能（专业版）。输入主题即自动完成：信息调研、文章撰写（含章节配图）、5个备选爆款标题、封面图生成、带格式排版的DOCX文档输出。触发词：写公众号文章、生成公众号内容、做微信推文、公众号文章完整版。 agent_created true 微信公众号文章完整生成技能（专业版） 概述 本技能提供微信公众号文章从主题到成品的完整生成流程，在基础版之上增加：章节配图、DOCX 格式输出（含彩色重点文字和表格

下载

• 正确公式：navBarHeight = menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight
• 这个结果包含了：状态栏高度 + 胶囊上方空隙 + 胶囊自身高度 + 胶囊下方空隙（即从状态栏顶到胶囊底的垂直跨度）
• 不要用 (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height —— 它假设上下空隙相等，但 iPhone 14 Pro 和安卓部分机型并不满足
• H5 和 App 端不需此计算，应走 statusBarHeight + 44px 或配置项 fallback

胶囊右侧留白和搜索框对齐怎么做

很多搜索框被胶囊盖住，本质是没预留右侧安全距离。关键不是“躲开胶囊”，而是“对齐胶囊右边界”：

• 用 menuButtonInfo.right 作为右侧锚点，例如搜索框 width 设为 calc(100% - menuButtonInfo.right - 15px)（15px 是左侧留白）
• 若用 flex 布局，把搜索框设为 flex: 1，胶囊区域用绝对定位覆盖在右侧，right: 7px（取 windowWidth - menuButtonInfo.right 更稳妥）
• 注意：胶囊 width 固定为 87px，但 right 随屏幕宽度变化，所以不能靠右 margin 硬调
• 在条件编译中仅对 #ifdef MP-WEIXIN 生效，其他端忽略该逻辑

最易被忽略的一点：胶囊位置在页面首次加载时获取是准的，但横竖屏切换或键盘弹出后可能失效——目前微信未提供监听事件，只能手动在 onResize（App/H5）或 onShow（小程序）中重取，否则 iPad 分屏或折叠屏下会错位。