Vueジャンプページの下部ナビゲーションタブバーを非表示にする方法は? 2つの方法が紹介されています

Vueジャンプ ページの下部ナビゲーション タブバーを非表示にする方法は?以下の記事では、下部のナビゲーションタブバーを非表示にする2つの方法を紹介しますので、ご参考になれば幸いです。

#1. Vue ジャンプ ページの下部ナビゲーション タブバーを非表示にする最初の方法

• ページの一部を非表示にしたい場合は、対応するルートのメタにそれを記述することができます [学習ビデオ共有:

  vue ビデオ チュートリアル、Web フロントエンド ビデオ]

• 下部のタブバーを非表示にする必要がある場合は、

  meta:{hideTabBar:true}

を設定します。
• そうでない場合は、設定してください

  meta :{hideTabBar:false}

#たとえば、次のようなナビゲーション バー:

##

meta:{
	hideTabBar:true
}

次に、

app.vue の
• tabbar

  コンポーネント (リンク の一番下に設定されている ルーター)、

## を判断してください。

このようにタブバーは表示されません

##2. Vue ジャンプ ページは下部ナビゲーション タブバーを非表示にする 2 番目の方法

##⭐⭐⭐ジャンプ後のページ (つまり、ジャンプ後のページ) が表示されます。 tabber を非表示にしたい場合)

高さを 100vh (ページ全体の高さ) に設定します。

しかし tabber は位置決めを使用しているため、ここでは機能しません

• したがって、相対的な位置を設定して都市を機能させることができます 効果はタバーよりも大きいです これが z-index の役割です 値を大きく設定してください
• 補足的な追加知識:
• position のデフォルトの役割には z インデックスがないため、ここでは相対位置を使用します

overflow-y:auto; スクロール バーは y 軸上でのみスクロールします

vh: css3 の新しい単位、ビューの高さの略語は、ビジュアル ウィンドウの高さを指します。高さが1200pxの場合。その場合、10vh は 120px

• .city {
  	position: relative;
    	 z-index: 9;
    	 height: 100vh;
    	 background-color: #fff;
  
    	 overflow-y: auto;
  }

• しかし、どのページにジャンプしても、タブバーを抽出できるように非表示にする必要があります

css ファイルに解凍します。

使用する場合は、対応するページに追加するだけです。

##以上、終了終了~

(学習ビデオ共有:

Web フロントエンド開発、

基本プログラミング ビデオ

)

以上がVueジャンプページの下部ナビゲーションタブバーを非表示にする方法は? 2つの方法が紹介されていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。