How to remove the native navigation bar in uniapp

With the advent of the mobile Internet era, more and more companies choose to develop their own mini programs to meet the needs of users. In the development of small programs, uniapp has become a popular technical framework. However, uniapp comes with a native navigation bar by default, which is not very convenient in some scenarios. So, how to remove the native navigation bar in the uniapp application? This article will introduce relevant methods to you.

Step 1: Set the page to full screen

In the process of removing the native navigation bar, the first step is to set the page to full screen. The specific implementation method is as follows:

1. Find the App.vue file in the root directory of the uniapp project, and add the following code to the file:

<style>
    /* 去除标题栏 */
    .app-header {
        display: none !important;
    }

    /* 设置页面全屏显示 */
    .app-page {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: auto;
        z-index: -1;
        background-color: #fff;
    }
</style>

2. In In the above code, we first set the original title bar to be invisible. Then, set the page to full screen by setting the relevant styles of app-page.
3. Finally, add the following code to the specific components of the page:

<template>
    <view class="content">
        <!-- 页面内容 -->
    </view>
</template>

<style>
    .content {
        padding-top: 44px; /* 因为我们已经去掉了导航栏，所以页面需要添加一定的上边距 */
    }
</style>

Step 2: Use the mescroll-view component

to remove the native navigation At the same time, we also need to retain some functions of the native navigation bar, such as status bar, return button, etc. In uniapp, the mescroll-view component is provided, which can solve this problem very well.

The specific implementation method is as follows:

1. Introduce the mescroll-uni plug-in in the pages.json file:

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "navigationBarBackgroundColor": "#f8f8f8"
            },
            "usingComponents": {
                "mescroll-uni": "/static/mescroll-uni/mescroll-uni"
            }
        }
    ]
}

2. In the specific components of the page , add the following code:

<template>
    <mescroll-uni>
        <view class="content">
            <!-- 页面内容 -->
        </view>
    </mescroll-uni>
</template>

<style>
    .content {
        padding-top: 44px; /* 因为我们已经去掉了导航栏，所以页面需要添加一定的上边距 */
    }
</style>

3. Finally, add the following code to the App.vue file:

<style>
    /* 设置内容页的z-index */
    .mescroll-uni-content {
        position: relative;
        z-index: 0;
    }

    /* 设置标题栏的z-index */
    .nav-bar {
        z-index: 1;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 44px;
        background-color: #fff;
    }
</style>

Through the above steps, you can successfully remove uniapp The native navigation bar in the app while retaining functions such as status bar and back button. I hope to be helpful.

The above is the detailed content of How to remove the native navigation bar in uniapp. For more information, please follow other related articles on the PHP Chinese website!