uniappで下部のナビゲーションバーを非表示にする方法

uniapp を使用してモバイル アプリケーションを開発する場合、下部のナビゲーション バーは非常に一般的なレイアウト方法です。ただし、より良いユーザー エクスペリエンスを実現するために、特定のページの下部ナビゲーション バーを非表示にする必要がある場合があります。この記事では、uniappで下部のナビゲーションバーを非表示にする方法を紹介します。

1. 下部ナビゲーション バーを非表示にする

uniapp では、下部ナビゲーション バーは tabbar タグを通じて実装されます。特定の下部ナビゲーション バーを非表示にしたい場合は、次の手順で実行できます。

1. ページの onLoad 関数で、uni.hideTabBar または uni.hideTabBarRedDot を呼び出して下部ナビゲーション バーを非表示にします。バーまたは下部のナビゲーション バー上の赤い点。例:

onLoad(){
  uni.hideTabBar({
    index: 2 // 隐藏第三个底部导航栏（下标从0开始）
  });
}

2. ページの onUnload 関数で、uni.showTabBar または uni.showTabBarRedDot を呼び出して、下部ナビゲーション バーまたは下部ナビゲーション バー上の赤い点を表示します。例:

onUnload(){
  uni.showTabBar({
    index: 2 // 显示第三个底部导航栏（下标从0开始）
  });
}

2. 下部のナビゲーション バーを切り替える

実際のプロジェクトでは、ログインまたはログアウトなどのシナリオで下部のナビゲーション バーを切り替える必要がある場合があります。現時点では、次の手順でこれを実現できます。

1. app.vue ファイルで、選択された下部ナビゲーション バーを表すグローバル変数 selectedTab を定義します。例:

export default {
  data() {
    return {
      selectedTab: 0 // 默认选中第一个底部导航栏
    }
  }
}

2. 各下部ナビゲーション バー ページに、ページが下部ナビゲーション バーかどうかを示す識別子 (isTab) を追加します。例:

export default {
  data() {
    return {
      isTab: true
    }
  }
}

3. 下部ナビゲーション バーのある各ページで、onShow 関数を追加し、この関数に selectedTab の値を設定して、下部ナビゲーション バーがページに対応することを示します。を選択する必要があります。例:

onShow(){
  this.$parent.selectedTab = 1; // 选中第二个底部导航栏
}

4. 下部ナビゲーション バーではない各ページに、onShow 関数を追加します。この関数では、selectedTab の値を使用して、下部ナビゲーション バーを表示する必要があるかどうかを決定します。隠れた。例:

onShow(){
  if(!this.$parent.isTab){
    this.$parent.hideTabBar();
  }
}

5. 下部ナビゲーション バーではない各ページで、onUnload 関数を追加し、この関数を使用して下部ナビゲーション バーを表示する必要があるかどうかを判断します。例:

onUnload(){
  if(!this.$parent.isTab){
    this.$parent.showTabBar();
  }
}

上記の手順により、uniapp の下部ナビゲーション バーを非表示にしたり、下部ナビゲーション バーを切り替えたりすることができます。

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