uniapp에서 기본 탐색 모음을 제거하는 방법

모바일 인터넷 시대가 도래하면서 사용자의 요구에 맞게 자체 미니 프로그램을 개발하는 기업이 점점 늘어나고 있습니다. 소규모 프로그램 개발에서 uniapp은 널리 사용되는 기술 프레임워크가 되었습니다. 그러나 uniapp에는 기본적으로 기본 탐색 모음이 제공되므로 일부 시나리오에서는 그다지 편리하지 않습니다. 그렇다면 uniapp 애플리케이션에서 기본 탐색 모음을 제거하는 방법은 무엇입니까? 이 기사에서는 관련 방법을 소개합니다.

1단계: 페이지를 전체 화면으로 설정

기본 탐색 모음을 제거하는 과정에서 첫 번째 단계는 페이지를 전체 화면으로 설정하는 것입니다. 구체적인 구현 방법은 다음과 같습니다.

1. uniapp 프로젝트의 루트 디렉터리에서 App.vue 파일을 찾아 파일에 다음 코드를 추가합니다.

<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. 위 코드에서는 먼저 원본을 설정합니다. 제목 표시줄을 보이지 않게 합니다. 그런 다음 앱 페이지의 관련 스타일을 설정하여 페이지를 전체 화면으로 설정합니다.
3. 마지막으로 페이지의 특정 구성 요소에 다음 코드를 추가합니다.

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

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

2단계: mescroll-view 구성 요소 사용

기본 탐색 모음을 제거하는 동안 기본 탐색 모음의 일부 기능도 유지해야 합니다. , 상태 표시줄, 복귀 버튼 등과 같은 uniapp에서는 이 문제를 매우 잘 해결할 수 있는 mescroll-view 컴포넌트가 제공됩니다.

구체적인 구현 방법은 다음과 같습니다.

1. pages.json 파일에 mescroll-uni 플러그인을 도입합니다.

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

2. 페이지의 특정 구성 요소에 다음 코드를 추가합니다.

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

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

3. 마지막으로 App.vue 파일에 다음 코드를 추가합니다.

<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>

위 단계를 통해 상태 표시줄 및 돌아가기 버튼과 같은 기능을 유지하면서 uniapp 애플리케이션의 기본 탐색 표시줄을 성공적으로 제거할 수 있습니다. 도움이 되기를 바랍니다.

위 내용은 uniapp에서 기본 탐색 모음을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!