uniapp_微信小程序自定义顶部导航栏和右侧胶囊对齐(不对齐来打我)

一、想要的效果

思路首先开启自定义导航栏,取消自带的导航栏,然后计算胶囊的高度和标题对齐

二、成品代码

1、首先再你需要居中的代码添加以下style

javascript 复制代码
	<view class="header"
				:style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',lineHeight:navBarHeight + 'px'}">


			</view>

2、模板上写上这几个变量

javascript 复制代码
data(){

return{
                 navBarTop: null,
				navBarHeight: null,
}
}

3、onload计算高度并赋值

javascript 复制代码
		onLoad() {
			let statuBar = uni.getSystemInfoSync().statusBarHeight;
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			console.log(menuButtonInfo)
			this.navBarTop = menuButtonInfo.top;
			this.navBarHeight = menuButtonInfo.height;

		},

三、效果

相关推荐
AI_AGENT_DEV_AI8 小时前
原生 APP 开发的开发优点
uni-app
JackieDYH21 小时前
uniapp-通知滚动组件+轮播图组件封装-案例
uni-app·轮播图·通知
2501_915921431 天前
appuploader-cli 命令行上传 IPA 到 App Store Connect upload CI 集成
android·ci/cd·小程序·https·uni-app·iphone·webview
结网的兔子2 天前
【前端开发】UniApp 项目地图选型与Web-APP跨端迁移方案
前端·uni-app
2501_916007473 天前
Bundle ID 注册与管理 App ID 创建指南 命名规则 权限开关与删除注意事项
android·ios·小程序·https·uni-app·iphone·webview
PedroQue993 天前
uni-app路由插件化:解锁高效开发新姿势
前端·uni-app
2501_915909063 天前
iOS 证书创建与管理 类型限制 p12 密码与云备份实操
android·ios·小程序·https·uni-app·iphone·webview
anyup3 天前
【2026年8月】uView Pro 千星,还拿到了 GVP
前端·uni-app·github
andr_gale4 天前
02_uniapp自定义上凸效果的底部TabBar
前端·javascript·uni-app·移动端
不爱说话郭德纲4 天前
uni-app x iOS 扫码模糊怎么办?AVFoundation 灰尘级别摄像头助你超广角聚焦
前端·uni-app·app