1.在pages.json里选择需要去掉原生导航栏的页面,更改属性navigationStyle图下:
2.在template模板中写导航
<template>
<view class="content">
<view class="head" :style="{'height':dom.height+'px','padding-top':dom.top+'px'}">
<view class="er" :style="{'height':dom.height+'px'}">222</view>
</view>
</view>
</template>
3.对应的css样式
.er{
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24rpx;
}
.head{
background-color: #007AFF;
width: 100%;
padding-bottom: 20rpx;
}
4.在created写下如下代码
created(){
let dom = uni.getMenuButtonBoundingClientRect()//获取微信小程序胶囊按钮的信息对象
this.dom=dom
let t=this
uni.getSystemInfo({
success:function(obj){
console.log(obj.statusBarHeight)//手机状态栏高度
t.p=obj.statusBarHeight
}
})
}
5.效果预览
