问题:
自定义导航栏设置背景显示图片可以,但要正确显示标题文字的位置
方案:
获取不同设备对应的状态栏高度,进行计算即可正确显示到对应的位置
代码:
节点代码:
<view class="headBg">
<image src="/static/makeMoney/makeMoneyHead.png" class="makeMoneyBgImg" mode="scaleToFill"></image>
<view class="title_block" :style="'height:'+titleHeight+'px'">
<view :style="'height:'+statusBarHeight+'px'"></view>
<view class="title" :style="'height:'+naviBarHeight+'px'">赚钱</view>
<view class="signInBlock">
<view class="signInLeft">
<view class="signInLeftTxtOne">
每日签到可获得10积分
</view>
<view class="signInLeftTxtTwo">
本月已连续签到0天
</view>
</view>
<view class="signInRight">
<view class="signInBtn">
签到规则
</view>
</view>
</view>
</view>
</view>
样式代码:
.headBg {
width: 100%;
height: 200px;
position: relative;
}
.makeMoneyBgImg {
width: 100%;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.title_block {
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 7px 3px;
}
.title {
text-align: center;
line-height: 30px;
color: #ffffff;
font-size: 32rpx;
font-weight: bold;
}
.signInBlock {
display: flex;
height: 60px;
}
.signInLeft {
margin-left: 10px;
flex: 1;
display: flex;
flex-direction: column;
}
.signInLeftTxtOne {
flex: 1;
color: #ffffff;
font-size: 36rpx;
display: flex;
align-items: center;
font-weight: bold;
}
.signInLeftTxtTwo {
flex: 1;
color: #ffffff;
font-size: 32rpx;
display: flex;
align-items: center;
}
.signInRight {
margin-right: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.signInBtn {
padding: 6px 16px;
background-color: #ffedc8;
font-size: 28rpx;
color: #ee3333;
border-radius: 4px;
}
js计算代码:
export default {
data() {
return {
titleHeight: 0, //状态栏和导航栏的总高度
statusBarHeight: 0, //状态栏高度
naviBarHeight: 0, //导航栏高度
}
},
onLoad() {
const res = uni.getSystemInfoSync()
const system = res.platform
this.statusBarHeight = res.statusBarHeight
if (system === 'android') {
this.titleHeight = (48 + this.statusBarHeight)
} else if (system === 'ios') {
this.titleHeight = (44 + this.statusBarHeight)
}
this.naviBarHeight = this.titleHeight - this.statusBarHeight
}
}
效果图: