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

本文主要是介绍uniapp_微信小程序自定义顶部导航栏和右侧胶囊对齐（不对齐来打我），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、想要的效果

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

二、成品代码 

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

	<view class="header":style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',lineHeight:navBarHeight + 'px'}"></view>

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

data(){return{navBarTop: null,navBarHeight: null,
}
}

3、onload计算高度并赋值

onLoad() {let statuBar = uni.getSystemInfoSync().statusBarHeight;let menuButtonInfo = uni.getMenuButtonBoundingClientRect();console.log(menuButtonInfo)this.navBarTop = menuButtonInfo.top;this.navBarHeight = menuButtonInfo.height;},

三、效果

这篇关于uniapp_微信小程序自定义顶部导航栏和右侧胶囊对齐（不对齐来打我）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---