一、想要的效果
思路首先开启自定义导航栏,取消自带的导航栏,然后计算胶囊的高度和标题对齐
二、成品代码
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;},