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;

		},

三、效果

相关推荐
2501_915921432 小时前
如何将 iOS 应用的 IPA 文件安装到手机进行测试
android·ios·智能手机·小程序·uni-app·iphone·webview
2501_916008892 小时前
不连 Xcode,也能把 iPhone App 的实时日志看清楚
android·ios·小程序·https·uni-app·iphone·webview
小CC吃豆子3 小时前
uni-app 上架 iOS 时常见的审核被拒原因有哪些?
ios·uni-app
小钟不想敲代码3 小时前
uni-app基础入门
uni-app
郑州光合科技余经理12 小时前
技术架构:上门服务APP海外版源码部署
java·大数据·开发语言·前端·架构·uni-app·php
HashTang16 小时前
【AI 编程实战】第 6 篇:告别复制粘贴 - 设计一个优雅的 HTTP 模块
前端·uni-app·ai编程
iOS阿玮16 小时前
苹果开发者账号申请的痛点,包含新限制说明!
uni-app·app·apple
2501_9159214321 小时前
iOS App 中 SSL Pinning 场景下代理抓包失效的原因
android·网络协议·ios·小程序·uni-app·iphone·ssl
雪芽蓝域zzs1 天前
uniapp 获取app版本信息(兼容鸿蒙)
uni-app
一颗小青松1 天前
uniapp app端使用uniCloud云函数和云对象
uni-app