微信小程序右上角胶囊按钮无法隐藏，唯一可靠方案是用uni.getMenuButtonBoundingClientRect()动态获取其位置并计算右侧安全间距。
不能隐藏，微信小程序平台强制保留右上角胶囊按钮（含「…」和「×」），任何 CSS 隐藏、display: none、opacity: 0 或覆盖层方案在真机上均无效——这是系统级 UI，不是页面 DOM 元素。
navigationStyle: "custom" 只是起点，不是解决方案
设置 "navigationStyle": "custom" 仅能移除原生导航栏背景和标题，但胶囊按钮仍会固着在右上角。它不响应页面样式，也不受 z-index 或定位影响。很多开发者误以为“自定义了导航栏”就等于“能控制整个顶部区域”，其实只是交出了背景渲染权，胶囊仍由微信原生托管。
常见错误现象包括：
- 在
pages.json中加"navigationBarRightButton": {"hide": true}—— 模拟器可能生效，真机完全无效 - 用
page::before绝对定位盖住右上角 —— 真机上会被微信拦截或穿透，且可能触发审核风险 - 硬编码
margin-right: 60px—— 不同机型胶囊宽度/位置不同（iPhone 15 Pro Max 和安卓折叠屏差异显著），必然错位
必须动态获取胶囊边界：uni.getMenuButtonBoundingClientRect()
唯一可靠方式是调用 uni.getMenuButtonBoundingClientRect() 获取胶囊的精确像素坐标。该 API 返回对象含 top、right、width、height 等字段，可用于计算安全间距。
关键注意事项：
- 该 API 在
onLoad或onShow中调用即可，无需异步等待；但需包裹#ifdef MP-WEIXIN条件编译，H5/App 端无此 API - 返回的
right是胶囊右边缘距离屏幕右侧的距离（非左侧），直接用于计算右侧留白最稳妥 - 不要依赖
left + width === right做校验——部分低端安卓机存在浮点误差，建议用right为主
示例片段：
onLoad() {
//#ifdef MP-WEIXIN
const res = uni.getMenuButtonBoundingClientRect()
this.$data.rightSafeArea = uni.getSystemInfoSync().windowWidth - res.right
//#endif
}适配右侧留白的两种实用写法
核心目标不是“隐藏”，而是让内容避开胶囊区域。推荐以下两种落地方式：
- 在自定义导航栏容器上设
:style="{ paddingRight: rightSafeArea + 'px' }"，适用于搜索框、按钮等内联元素需要右对齐的场景 - 对单个图标或按钮单独设
:style="{ marginRight: (statusBarHeight + rightSafeArea) + 'px' }"，适合胶囊下方还有状态栏高度叠加的情况（如带阴影的搜索栏） - 务必搭配
uni.getSystemInfoSync().statusBarHeight使用——胶囊top值 ≠ 状态栏高度，两者差值即为顶部间隙，影响垂直对齐
容易被忽略的一点：胶囊位置在横屏/刘海屏/折叠屏下可能突变，但 getMenuButtonBoundingClientRect() 每次调用都会返回当前实际值，所以不必缓存，也不必监听窗口变化——除非你做了强制横屏，否则页面生命周期内调用一次足够。
