uniappでタブバーの表示と非表示を制御する方法

モバイル アプリケーションの普及に伴い、TabBar は主流のボトム ナビゲーション バー デザインとして、ますます多くのアプリケーションに採用されています。 VueフレームワークのUniApp開発では、TabBarの表示・非表示を制御する方法も従来のネイティブアプリケーションとは異なりますが、本記事ではUniAppを使用してTabBarの表示・非表示を制御する方法を紹介します。

1. 前提知識

この記事で説明するTabBarの表示/非表示を制御する操作を実行する前に、次の前提知識を習得する必要があります:

• Vue 2 (Vue 3 をマスターしているとよい)
• UniApp の基礎知識 (プロジェクト テンプレート、ページ、コンポーネントなどの基本概念を含む)
• UniAppレイアウト メソッド (フレックス、グリッド、位置など)
• UniApp に必要な Npm 依存関係パッケージ (依存関係の管理に npm を使用する場合)

2. UniApp の TabBar

UniApp では、TabBar は複数の下部ナビゲーション タブで構成され、各タブにページを表示でき、ユーザーは対応するタブをクリックすることでアプリケーション内のさまざまなページを参照できます。

TabBar は、アプリケーション全体または特定のページに表示できます。アプリケーション全体に表示される TabBar はグローバル TabBar と呼ばれ、特定のページに表示される TabBar はローカル TabBar と呼ばれます。各ページごとにTabBarを表示するかどうかをカスタマイズすることで、TabBarの表示・非表示を実現します。

3. UniApp で TabBar の表示と非表示を制御する方法

3.1 ページ設定ファイルの使用

UniApp では、各ページに設定ファイルがあります。現在のページに下部の TabBar を表示する必要があるかどうかをファイルに設定します。プロジェクトのルート ディレクトリにあるpages.jsonファイルで、グローバル TabBar のスタイルとページ パスを設定できます。

各ページのxxx.vueファイルが配置されているディレクトリに、xxx.json構成ファイルを作成できます (xxxは現在のページの名前を意味します)。xxx.jsonファイルでは、navigationBarHiddenプロパティを設定することで、現在のページの下部のタブバーを非表示にする必要があるかどうかを制御できます。

次は例です:

{ "navigationBarTitleText": "我的页面", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarHidden": true // 控制底部 TabBar 的显示和隐藏 }

この構成ファイルで、navigationBarHiddenプロパティをtrueに設定し、下部の TabBar を非表示にします。false下部のTabBarを表示できます。このメソッドにより、各ページで下部の TabBar の表示と非表示を制御できます。

3.2 Vue のミキシングの使用

ページ設定ファイルで TabBar の表示と非表示を制御するだけでなく、Vue コンポーネントで mixin を使用して TabBar の表示と非表示を制御することもできます。この方法はより柔軟で、ページ上の特定の条件に基づいて TabBar の表示と非表示を動的に制御する必要がある状況に適しています。

次は例です:

export default { mixins: [tabbarMixin], // 引入 mixin 配置 data() { return { isShowTabBar: true // 控制 TabBar 显示和隐藏的状态 } } }

上の例では、tabbarMixinという名前のミックスイン オブジェクトがmixins属性を通じて導入されています。このオブジェクトは、下部の TabBar の表示と非表示を構成します。isShowTabBarという名前の状態変数を定義すると、コンポーネント内の下部の TabBar の表示と非表示を動的に制御できます。

以下は、ミックスイン オブジェクトの具体的な構成です:

export const tabbarMixin = { onShow() { // 显示底部 TabBar uni.setTabBarStyle({ selectedColor: "#007AFF", backgroundColor: "#ffffff", borderStyle: "black" }) uni.showTabBar() }, onHide() { // 隐藏底部 TabBar uni.hideTabBar() } }

uni.showTabBar()およびuni.hideTabBar()を呼び出すことによりメソッドを使用すると、下部のタブバーの表示と非表示を制御できます。さらに、下部の TabBar のスタイルは、uni.setTabBarStyle()メソッドを通じて設定できます。

4. その他の注意事項

UniApp で下部の TabBar の表示と非表示を制御する場合、次の問題に注意する必要があります。ページ構成ファイルを変更して TabBar の表示と非表示を変更するには、現在のページで有効にする必要があります。他のページで TabBar の表示と非表示の状態を変更する必要がある場合は、対応するページの構成ファイルで変更する必要がありますページ。

UniApp の下部の TabBar はコンポーネントを通じて実装されるため、ユーザーのクリック操作を容易にするために、ページ レイアウト中にコンポーネントをページの下部に配置する必要があります。
1. ミックスイン オブジェクトを使用して下部の TabBar の表示と非表示を制御する場合、名前の競合を避けるためにミックスイン オブジェクトの名前に注意する必要があります。
3. 5. 概要

以上がuniappでタブバーの表示と非表示を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。