uniappでボトムナビゲーションをキャンセルする方法

モバイル デバイスの人気に伴い、最新のアプリケーションでは UI/UX デザインにますます注目が集まっています。この傾向に伴い、多くのアプリケーションは、ユーザーがアクセスしやすくするために、重要な機能を下部のナビゲーション バーに追加しています。ただし、場合によっては、下部のナビゲーション バーを削除した方が適切な場合もあります。この記事では、Uniapp の下部ナビゲーション バーをキャンセルする方法について説明します。

まず、Uniapp の下部ナビゲーション バー コンポーネントを確認してみましょう。下部ナビゲーション コンポーネントは再利用可能なコンポーネントで、通常はアプリケーションの下部にあり、複数のページまたは機能のアイコンとラベルを表示します。これらのページまたは機能は通常、アプリケーションのコア機能またはメイン モジュールです。

1. 単一ページの下部ナビゲーションをキャンセルする

単一ページの下部ナビゲーションをキャンセルするのは非常に簡単です。下部のナビゲーション バーを非表示にする必要があるページでは、ページの <script> に次のコードを追加するだけです: </script>

export default {
    config: {
        "disableScroll": true,
        "navigationBarTitleText": "My Page",
        "usingComponents": {}
    },
    onShow() {
        uni.hideTabBar({
            animation: true
        });
    },
    onHide() {
        uni.showTabBar({
            animation: true
        });
    }
}

コードでは、Uniapp コンポーネントのライフ サイクル フックを使用して、ページが表示されているときに下部ナビゲーション バーを非表示にし、ページが非表示になっているときに下部ナビゲーション バーを再度表示します。

2. 複数のページの下部ナビゲーションをキャンセルする

複数のページの下部ナビゲーションをキャンセルする必要がある場合は、次のコードを App.vue ファイルに追加できます。

export default {
    config: {
        "disableScroll": true,
        "navigationBarTitleText": "My App",
        "usingComponents": {}
    },
    onShow() {
        let pages = getCurrentPages();
        let currentPage = pages[pages.length - 1];
        if (currentPage.route === 'pages/home/index' || currentPage.route === 'pages/user/index') {
            uni.hideTabBar({
                animation: true
            });
        } else {
            uni.showTabBar({
                animation: true
            });
        }
    }
}

コードでは、App.vue ファイルのライフ サイクル フック onShow() を使用します。ページが表示されるたびに、現在のページのルートを取得し、下部のナビゲーション バーを非表示にする必要があるかどうかを判断します。現在のページにあります。非表示にする必要がある場合は、Uniapp が提供する HideTabBar メソッドを使用して下部ナビゲーション バーを非表示にし、そうでない場合は下部ナビゲーション バーを表示します。

まとめると、Uniapp の下部ナビゲーション バーをキャンセルするのは非常に簡単です。下部ナビゲーションを非表示にする必要があるページ、または下部ナビゲーションが表示される App.vue ファイルに、対応するコードを追加するだけです。表示を制御する必要があります。もちろん、より高度なカスタマイズと制御が必要な場合は、このコンポーネントにはさらに多くのプロパティとメソッドも用意されています。詳細については、Uniapp のドキュメントを参照してください。

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