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. In 上記のコードでは、最初に元のタイトル バーを非表示に設定します。次に、app-page の関連スタイルを設定して、ページを全画面表示に設定します。
3. 最後に、次のコードをページの特定のコンポーネントに追加します。

<template>
    <view>
        <!-- 页面内容 -->
    </view>
</template>

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

ステップ 2: mescroll-view コンポーネント

を使用して、ネイティブ ナビゲーションを削除します。同時に、ステータス バー、戻るボタンなど、ネイティブ ナビゲーション バーのいくつかの機能も保持する必要があります。 uniapp では、この問題をうまく解決できる mescroll-view コンポーネントが提供されています。

具体的な実装方法は次のとおりです:

1. mescroll-uni プラグインをpages.json ファイルに導入します:

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

2. ページの特定のコンポーネントに、次のコードを追加します:

<template>
    <mescroll-uni>
        <view>
            <!-- 页面内容 -->
        </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 中国語 Web サイトの他の関連記事を参照してください。