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;

		},

三、效果

相关推荐
梦曦i7 小时前
unix-router v0.1.0 首发:uni-app x 的 vue-router 风格路由库
前端·uni-app
bug总结1 天前
uniapp 微信小程序分包规范
微信小程序·小程序·uni-app
天府云创1 天前
uni-app X 蒸汽模式发布!性能比肩原生~
前端框架·uni-app·移动开发·原生应用·蒸汽模式·app研发·多端适配
堕落年代1 天前
uni-app x 蒸汽模式:实时流式语音识别(ASR)三大疑难杂症全记录
人工智能·uni-app·语音识别
RisunJan1 天前
uni-app 高频面试题与解答
uni-app
梦曦i2 天前
@meng-xi/create-uni-app vs unibest:轻量脚手架与重型框架的定位之争
前端·uni-app
2501_915106322 天前
iOS数据采集技术详解:从性能监控到崩溃分析的全链路实践
android·ios·小程序·https·uni-app·iphone·webview
我爱写代码i3 天前
AI对话绘画数字人源码 - uniapp前端
前端·人工智能·uni-app
ModyQyW3 天前
vite-plugin-uni-pages 更新了什么
前端·uni-app
2501_915918413 天前
Flutter项目配置iOS混淆的详细步骤与工具推荐
android·flutter·ios·小程序·uni-app·cocoa·iphone