uniapp微信小程序无法屏蔽右上角胶囊按钮（...）问题解决方案

不爱学习小趴菜2026-01-29 10:09

从网上查了很多方法，基本都是靠在pages.json中对应页面添加"navigationBarRightButton": {"hide":true}

javascript 复制代码

{
  "navigationBarTitleText": "我的页面",
  "navigationStyle": "custom",
  "navigationBarBackgroundColor": "#0000FF",
  "navigationBarRightButton": {"hide":true}, // 隐藏右侧胶囊按钮
  "usingComponents": {}
}

但是该方法仅限模拟器中生效，在真机下还是在的，所以没法去除或者隐藏胶囊按钮。

综上所述，只能想办法避开它

参考:https://uniapp.dcloud.net.cn/api/ui/menuButton.html#getmenubuttonboundingclientrect

实现效果如下：

代码如下，主要是靠margin-right：

html 复制代码

<!-- 分享图标 -->
<view class="share-icon-box" @tap="handleShare" :style="{marginRight:(statusWidth + searchRight+'px')}">
	<text class="iconfont icon-ic_share1"></text>
</view>

javascript 复制代码

			// #ifdef MP
			const res = uni.getMenuButtonBoundingClientRect()
			const statusHeight = res.top //胶囊距离顶部
			const statusRight = res.right //胶囊右边界坐标
			const jnHeight = res.height //胶囊高度
			this.statusWidth= res.width
			this.searchTop=statusHeight
			this.searchHeight=jnHeight
			this.searchBoxHeight = this.searchTop*2 + jnHeight
			//搜索框宽度计算
			uni.getSystemInfo({
				success:info=>{
					this.searchRight=info.windowWidth-statusRight
				}
			})
			// #endif

哎~~不想写了，小白一名如所写有误望指正，也希望各位大佬有更好的方法发出来让小弟学习一下