The navigation bar solves the problem that the status bar area at the top of the phone is not covered by page content. Uniapp project, small programs can use the default navigation bar given by the official, to solve the problem of mobile phone status bar. And there are third-party frameworks that do that as well. But in actual development, the default or third-party design can not fully meet the needs of the business, so the best way is to write their own navigation bar, how to change how to change. Non-h5 terminal, the status bar at the top of the phone will be covered by the page content. Of course, if you do a short video like a certain sound, you don’t need to consider the status bar, and the form is immersive. The CSS variable, –status-bar-height, is 25px for the applet, and the app will change it according to the actual situation. The reference code is as follows:

<view class="status_bar"> <! --status bar --> </view> <view> Navigation bar </view>. width: 100%; }Copy the code

If you need to locate the navigation bar, do so

<view class="status-contents"> <view class="status top-view"></view> <view class="title" style="height: 88px;" </text> </view> </view>. Status-contents {height: calc(var(--status-bar-height) + 88px); } .top-view{ width: 100%; position: fixed; top:0; } .status{ height:var(--status-bar-height); } .title{ width: 100%; position: fixed; top: var(--status-bar-height); }Copy the code

Tip: Remove the default navigation bar. Set navigationStyle to custom.