Non H5 end of uni app, regional setting of status bar on the top of mobile phone

  design sketch ：

Because of special needs , The page does not need a default status bar , You need to hide the status bar

Hide status bar method ：

stay pages.json In profile , Find the page configuration where the status bar does not need to be displayed

add to ："navigationStyle":"custom"

for example ：

  After the vue Medium

template：

<!-- Status bar height css Variable -->
 <view class="status_bar"></view>

 css ：

.status_bar {
        height: var(--status-bar-height);
        width: 100%;
        background-color: #007AFF;
    }

for example ：

Be careful ： You need to use a real machine to see the effect ,H5 End settings  "navigationStyle":"custom" after , The height is 0.