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