uniappの上部ナビゲーションバーを削除する方法

モバイル開発では、ページ スタイルをカスタマイズする必要があることがよくありますが、問題の 1 つは、上部のナビゲーション バーを削除する方法です。この記事では、uniapp のトップ ナビゲーション バーを削除する方法を紹介します. 具体的な実装方法は次のとおりです:

1. ページを全画面に設定します

uniapp では、ページを全画面表示にするかどうかを制御できます。ページスタイルを設定すると、ページが全画面表示になります。全画面表示を実現するには、ページ スタイルに次の属性を設定します。

page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

上記のコードは、ページの位置を固定し、画面サイズ全体を占有することにより、全画面表示効果を実現します。

2. ステータス バーを非表示にする

ステータス バーを非表示にしたい場合は、manifest.json ファイルに次のコードを追加できます:

{
    "statusbar": {
        "style": "hidden"
    }
}

上記のコード上部のナビゲーション バーを含むステータス バー全体が非表示になり、上部のナビゲーション バーを削除したような効果が得られます。

この方法は実際のデバイスにのみ有効であることに注意してください。Hbuilder X の組み込みブラウザ プレビューを使用する場合、上部のナビゲーション バーは引き続き表示されます。したがって、テスト用に実機を使用するか、パッケージ化する必要があります。

3. プラグインを使用する

独自のコードで上部のナビゲーション バーを削除したくない場合は、uni-app プラグインを使用してそれを実現できます。 uni-app は、「20 Components」というプラグインを公式に提供しています。これには、上部のナビゲーション バーを削除できるコンポーネントを含む、直接使用できるコンポーネントが含まれています。

使用法は次のとおりです:

<template>
    <view>
        <nav-bar></nav-bar>
    </view>
</template>

上記のコードは、カスタムのトップ ナビゲーション バーをページに追加して、トップ ナビゲーション バーを削除する効果を実現します。なお、このプラグインを使用する場合は、まずプロジェクトに20コンポーネントプラグインをインストールする必要がありますので、具体的なインストール方法についてはuni-appの公式ドキュメントを参照してください。

要約すると、上記の 3 つの方法はすべて、uniapp の上部ナビゲーション バーを削除する効果を実現できます。このうち、最初の方法は純粋な CSS 実装で、ページに直接スタイルを追加できます。 2 番目の方法では、manifest.json ファイルに構成を追加する必要がありますが、これはより単純な方法です。 3 番目の方法は、プラグインを使用して実現する方法で、使用する前にプラグインをインストールする必要がありますが、この方法の方が便利です。実際の状況に基づいて、使用する方法を選択できます。

以上がuniappの上部ナビゲーションバーを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。