uniapp custom navigation bar

Hits: 0

The problem solved by the navigation bar mentioned here is that the status bar area at the top of the mobile phone is not covered by the page content. [Both the uniapp] project and the applet can use the official default navigation bar, which solves the problem of the status bar of the mobile phone. And there are also third-party frameworks that have also been dealt with. However, in actual development, the default or third-party design cannot fully meet the needs of the business, so the best way is to write the navigation bar yourself, and change it as you want.
For non-H5 terminals, the status bar at the top of the phone will be covered by the page content. Of course, if you make a short video like a certain sound, you don’t need to consider the status bar, and the form is immersive. Uniapp officially gave the solution, that is, the css variable, –status-bar-height, the value of the applet is 25px, and the app changes according to the actual situation.
The reference code is as follows:

<view class = "status_bar" >
            <!-- status bar --> 
</ view > 
< view > navigation bar </ view >
.status_bar {
       height: var(--status-bar-height);
       width: 100%;
   }

If you need to position the navigation bar, do it like this

<view class="status-contents">  
     <view class="status top-view"></view>  
    <view class="title" style="height: 88px;">
    </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);  
    }

Tip: To remove the default navigation bar, set the navigationStyle to custom;

You may also like...

Leave a Reply

Your email address will not be published.