js部分
var page_this = this;
var sysinfo = wx.getSystemInfoSync(),
statusHeight = sysinfo.statusBarHeight,
isiOS = sysinfo.system.indexOf("iOS") > -1,
navHeight;
if (!isiOS) {
navHeight = 48;
} else {
navHeight = 44;
}
wx.getSystemInfo({
success: (res) => {
page_this.setData({
windowHeight: res.windowHeight,
windowWidth: res.windowWidth,
statusHeight: statusHeight,
navHeight: navHeight
})
}
})
wxml部分
<!--头部内容填充-->
<view class="h-false" style="height:{{statusHeight + navHeight}px;"></view>
<!-- 人造头部 -->
<view class="h">
<view class="h-t" style="padding-top:calc({{statusHeight}}px - 8px);">
<!--返回按钮-->
<navigator class="h-t-left" open-type="reLaunch" url="../index/index" style="top:calc({{statusHeight}}px + 2px);">
<text class="iconfont icon-back"></text>
<text class="clearfix"></text>
</navigator>
<!--居中标题-->
<view class="h-t-title">
<text>标题标题</text>
</view>
</view>
</view>
wxss部分
/*头部*/
.h{
background:#fff;
color: #000;
font-size: 32rpx;
text-align: center;
font-family: PingFangSC-regular;
/*position: fixed;*/
width: 100%;
top: 0;
left: 0;
z-index: 100;
}
.h-t{
position: relative;
}
.h-t .h-t-left{
left: 30rpx;
font-size: 32rpx;
width: 64rpx;
height: 64rpx;
position: absolute;
}
.h-t .icon-back{
vertical-align: middle;
font-size: 52rpx;
color:#C7C7CC;
}
.h-t .h-t-title{
font-size: 14px;
/* padding:16px 0; */
padding:5px 0;
/* min-height: 16px; */
}
