不能取消。微信小程序的胶囊按钮是系统级控件，navigationStyle: "custom" 仅允许自定义导航栏DOM渲染，但胶囊仍强制显示在右上角，无法删除或遮盖；需通过 uni.getSystemInfoSync() 和 uni.getMenuButtonBoundingClientRect() 动态适配位置，且必须区分平台处理H5/App端无胶囊的特殊情况。
不能取消。微信小程序的胶囊按钮是系统级控件，navigationStyle: "custom" 只能让你接管导航栏区域的 DOM 渲染权，但胶囊本身仍会强制显示在右上角 —— 你删不掉它，也盖不住它。
为什么「隐藏胶囊」是个伪需求
很多开发者以为设置 navigationStyle: "custom" 后就能“去掉胶囊”，结果发现它还在那儿，还遮挡搜索框或标题。这是因为：
- 胶囊不是页面元素，不参与 Vue 渲染，也不受 CSS
display: none或z-index影响 - 它由微信客户端原生绘制，位置固定（通常在状态栏右侧），且随机型/微信版本微调（实测浮动 ±2px）
- 试图用
position: absolute盖住它，大概率导致 iOS 下点击失效或 H5 端错位
真正该做的事：适配它，而不是消灭它
目标不是“取消”，而是让内容避开胶囊、对齐胶囊、视觉上“融合”。关键靠两个 API 动态计算：
-
uni.getSystemInfoSync().statusBarHeight→ 获取状态栏高度（所有平台都有） -
uni.getMenuButtonBoundingClientRect()→ 获取胶囊的top、height、left、width
典型适配逻辑（小程序端）：
const systemInfo = uni.getSystemInfoSync() const capsule = uni.getMenuButtonBoundingClientRect() // 导航栏总高 = 状态栏 + 上间隙 + 胶囊高 + 下间隙 const navBarHeight = (capsule.top - systemInfo.statusBarHeight) * 2 + capsule.height // 搜索框宽度 = 胶囊 left - 左侧留白（比如 30rpx） const searchWidth = capsule.left - 30
注意：capsule.top 是胶囊上边距（非状态栏下沿），差值就是上间隙；乘 2 是因为上下间隙通常对称。
H5 和 App 端别硬套小程序逻辑
这两个平台根本没有胶囊按钮，但很多人复制小程序代码后发现 H5 导航栏“太高”或“偏右”，就是因为：
- 直接用了
capsule.left计算宽度 → H5 返回null或报错，降级失败 - 没做平台判断，把小程序的
navBarHeight公式照搬过去 → H5 显示异常高
正确做法是加平台判断：
const platform = uni.getSystemInfoSync().platform
let navBarHeight = 88 // H5/App 默认高度（rpx）
let searchWidth = '100%'
if (platform === 'ios' || platform === 'android') {
// App 端可选：用 statusBarHeight + 44rpx
} else if (platform === 'mp-weixin') {
const capsule = uni.getMenuButtonBoundingClientRect()
navBarHeight = (capsule.top - systemInfo.statusBarHeight) * 2 + capsule.height
searchWidth = `${capsule.left - 30}rpx`
}
最易被忽略的点：胶囊位置不是静态常量，每次冷启动、横竖屏切换、甚至微信版本更新都可能变化。不要 hardcode left: 317 这类值，哪怕测试机上看起来刚好 —— 真机覆盖一跑就露馅。
