uniappでタブバーの表示と非表示を制御する方法-uni-app-php.cn

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

PHPz

リリース： 2023-04-23 17:32:20

オリジナル

10668 人が閲覧しました

モバイルアプリケーションの普及に伴い、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 の表示と非表示の状態を変更する必要がある場合は、対応するページの構成ファイルで変更する必要がありますページ。

ミックスインオブジェクトを使用して下部の TabBar の表示と非表示を制御する場合、名前の競合を避けるためにミックスインオブジェクトの名前に注意する必要があります。
5. 概要

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

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