<view
class='header-wrap'
:style="{height: navHeight + 'px', paddingTop: statusBarHeight + 'px'}">
<view class="goback" @click="goback()" :style="{height: navHeight + 'px'}">
<image src="http://yunvjia.oss-accelerate.aliyuncs.com/news/2021/7/30/qp53i21627630137042.png" mode="">
</image>
</view>
<view class="header-title">
标题
</view>
</view>
data() {
return {
navHeight:'',
statusBarHeight:''
}
},
onLoad() {
const info = uni.getSystemInfoSync()
this.statusBarHeight = info.statusBarHeight
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.navHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
console.log(this.navHeight)
}
.header-wrap{
position: fixed;
left: 0;
top: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: #7BCFC2;
.goback{
font-size: 34upx;
font-weight: 800;
color: #FFFFFF;
width: 100rpx;
position: fixed;
left: 0;
display: flex;
justify-content: center;
align-items: center;
image{
width: 20rpx;
height: 40rpx;
}
}
.header-title{
font-size: 34upx;
font-weight: 800;
color: #FFFFFF;
}
}