期望效果
苹果的ios端、小程序 和 安卓端app 均没问题
发现真机调试小米8 fixed布局下 盒子边框会有白边
结构
STATUS_BAR_H -- 状态栏高度
NAV_BAR_H -- 导航栏高度
TOTAL_H = STATUS_BAR_H + NAV_BAR_H
<view class="custom-nav-bar">
<view class="custom-nav-bar__container custom-nav-bar_fixed">
<view class="status-bar-box"
:style="{'height':STATUS_BAR_H+'px'}"></view>
<view class="nav-bar-box"
:style="{'height':NAV_BAR_H+'px;'}"></view>
</view>
<!-- 为fixed时 默认顶替 原空间 -->
<view class="my-nav-bar__replace"
:style="{'height':TOTAL_H+'px;'}"></view>
</view>
<view class="top-box">
<view class="gap"></view>
<view class="topinfo">
<view class="avatar-box">
<image class="user-avatar" @click="toLogin" :src="userInfo.defaultAvatar" alt=""/>
</view>
......
</view>
</view>
// scss样式
.custom-nav-bar{
&__container{
background-image:linear-gradient( 90deg, rgb(229,61,97) 0%, rgb(244,140,120) 100%);
}
&__replace{
background-image:linear-gradient( 90deg, rgb(229,61,97) 0%, rgb(244,140,120) 100%);
}
&_fixed{
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}
}
.top-box{
display: flex;
align-items: flex-end;
height: 148upx;
.gap{
width: 100%;
height: 35upx;
background-image: linear-gradient( 90deg, rgb(229,61,97) 0%, rgb(244,140,120) 100%);
}
.top-info{
flex: 1;
display: flex;
align-items: flex-end;
position: relative;
background-color: #fff;
padding-left: 30upx;
box-sizing: border-box;
justify-content: space-between;
.avatar-box{
height: 144upx;
width: 144upx;
position: absolute;
//z-index: 100;
left: $pageLFpadding;
border-radius: 50%;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.35);
.user-avatar{
height: 133upx;
width: 133upx;
border-radius: inherit;
border: 7upx solid #fff;
}
&-replace{
width: 140upx;
}
}
....
}
}