html部分
<!-- 动态绑定行内样式,根据不同手机 的通知栏高度显示不同的高度 -->
<view class="nav" :style="{paddingTop:phoneHeight + 'px'}">
<image src="../../static/image/left.png" mode="" @click="returnBefore"></image>
<view class="nav-word">{{title}}</view>
<view class="kong"></view>
</view>
js部分
data() {
return {
phoneHeight: ''
}
},
created() {
//获取手机状态栏的高度
this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
},
props: [
"title"
],
methods: {
returnBefore() {
uni.navigateBack({
delta: 1
})
}
}
css部分
.nav{
position: fixed;
opacity: 1;
top: 0;
z-index: 999;
width: 100%;
height: 140rpx;
line-height: 140rpx;
display: flex;
align-content: center;
align-items: center;
justify-content: space-between;
background:linear-gradient(90deg,rgba(198,165,111,1),rgba(228,205,162,1));
padding: 0 24rpx;
}
.nav image{
width:20rpx;
height:36rpx;
/* padding-left: 24rpx; */
}
.kong{
width:30rpx;
height:36rpx;
}
.nav-word{
font-size:36rpx;
font-weight:bold;
color:rgba(255,255,255,1);
margin-left: 0;
}