Custom navigation bar:
app.json:
"navigationStyle": "custom"
:
<!--wxml-->
<view class="header">
<view class="flex">
</view>
</view>
<!--wxss-->
.header{
position: fixed;
left: 0;
right: 0;
top: 0;
height: 114rpx;
padding: 0;
padding-top: 40rpx;
border-bottom: none;
background-color: -sharpffffff;
}
.header::after{
content: "";
display: inline-block;
width: 100%;
height: 40rpx;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
background-color: -sharp000000;
}
.header>view{
width: 100%;
height: 100%;
padding: 0 15rpx;
} Custom effect figure 1 (iphone6):
iphone5:
:
the capsule on the right is always running around compared to the custom navigation bar, how to avoid it?