本篇为写给自己看
index.wxml
<view class="status-bar" style="height:{{statusBarHeight}}px"></view>
<view class=‘nav‘ style="height:{{titleBarHeight}}px">
<view class=‘navLeft‘>
<view class=‘iconBox‘ bindtap=‘tapNavigate‘ data-item=‘person‘>
<image class=‘icon‘ src=‘/images/icon-personSmall.png‘></image>
</view>
<view class=‘leftLine‘></view>
<view class=‘iconBox‘ bindtap=‘tapNavigate‘ data-item=‘message‘>
<image class=‘icon‘ src=‘/images/icon-msg.png‘></image>
<view class=‘redMsg‘></view>
</view>
</view>
<view class=‘navMid‘>商户系统</view>
</view>
index.wxss
.nav{
position: relative;
left: 0;
width: 90%;
margin: 0 auto;
display: flex;
align-items: center;
}
.navLeft{
width: 176rpx;
height: 64rpx;
background: rgba(0,0,0,0.10);
border: 1rpx solid rgba(255, 255, 255, 0.205);
border-radius: 68rpx;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
}
.navMid{
color: white;
margin: auto;
font-size: 32rpx;
}
.iconBox{
height: 200%;
width: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.redMsg{
position: absolute;
right: 35%;
top: 35%;
width: 10rpx;
height: 10rpx;
border-radius: 100%;
background: red;
}
.leftLine{
height: 55%;
border-left: 1rpx solid rgba(255, 255, 255, 0.219);
}
.icon{
width: 32rpx;
height: 32rpx;
}
js
onLaunch: function () {
const vm = this
// let totalTopHeightSet = {
// ‘iPhone‘: 64,
// ‘iPhone X‘: 88,
// ‘android‘: 68
// }
wx.getSystemInfo({
success: function (res) {
let totalTopHeight = 68
if (res.model.indexOf(‘iPhone X‘) !== -1) {
totalTopHeight = 88
} else if (res.model.indexOf(‘iPhone‘) !== -1) {
totalTopHeight = 64
}
vm.globalData.statusBarHeight = res.statusBarHeight
vm.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
},
failure() {
vm.globalData.statusBarHeight = 0
vm.globalData.titleBarHeight = 0
}
})
},