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;

		},

三、效果

相关推荐
中国胖子风清扬1 天前
GPUI 在 macOS 上编译问题排查指南
spring boot·后端·macos·小程序·rust·uni-app·web app
码云数智-园园2 天前
uni-app 实现物流进度跟踪功能:从 UI 到数据驱动的完整方案
ui·uni-app
予你@。4 天前
UniApp + Vue3 实现 Tab 点击滚动定位(微信小程序)
微信小程序·小程序·uni-app
游戏开发爱好者84 天前
完整教程:App上架苹果App Store全流程指南
android·ios·小程序·https·uni-app·iphone·webview
予你@。4 天前
uni-app progress 组件使用详解
uni-app
iOS阿玮4 天前
春节提审高峰来袭!App Store 审核时长显著延长。
uni-app·app·apple
2501_916007474 天前
ios上架 App 流程,证书生成、从描述文件创建、打包、安装验证到上传
android·ios·小程序·https·uni-app·iphone·webview
2501_915106325 天前
iPhone 文件管理,如何进行应用沙盒文件查看
android·ios·小程序·https·uni-app·iphone·webview
2501_915921435 天前
Fastlane 结合 AppUploader 来实现 CI 集成自动化上架
android·运维·ci/cd·小程序·uni-app·自动化·iphone
云游云记5 天前
vue2 vue3 uniapp (微信小程序) v-model双向绑定
微信小程序·uni-app·vue