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 の下部の TabBar の表示と非表示を制御する方法を学びました。ページ構成ファイルを変更するか、柔軟性と適応性に優れた mixin オブジェクトを使用することで、下部の TabBar の表示と非表示を制御できます。同時に、実際のアプリケーションでは特定の設計仕様に従い、ユーザーの操作を容易にするためにページの下部に TabBar を配置することに注意する必要があります。

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