Heim  >  Artikel  >  Web-Frontend  >  Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

青灯夜游
青灯夜游nach vorne
2022-11-18 20:47:492590Durchsuche

VueWie verstecke ich die untere Navigations-Tableiste, wenn ich zu einer Seite springe? Der folgende Artikel stellt Ihnen zwei Methoden zum Ausblenden der unteren Navigations-Tableiste vor. Ich hoffe, er wird Ihnen helfen!

Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

1. Die erste Möglichkeit, die untere Navigations-Tableiste auf der Vue-Sprungseite auszublenden

  • Wenn Sie einige Teile auf einer Seite ausblenden möchten, können Sie dies in die Meta der entsprechenden Route schreiben [Freigabe von Lernvideos]: Vue-Video-Tutorial, Web-Frontend-Video

  • Wenn Sie die Tableiste unten ausblenden müssen, legen Sie meta:{hideTabBar:true} fest meta:{hideTabBar:true}

  • 不需要的就设置meta:{hideTabBar:false}

  • 例如这种导航栏:

Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

meta:{
	hideTabBar:true
}

Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

  • 然后在app.vue中的tabbar组件(就是底部配置的router-link)中判断就行

Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

  • 这样下面的tabbar就不会显示了

Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

二、Vue跳转页面隐藏底部导航tabbar的第二种方法

⭐⭐⭐

  • 给你跳转后的那个页面(即你想要隐藏tabber的页面)
  • 给它的高度设为100vh,是整个页面的高度
  • 但是因为tabber用过定位,所以这里不起作用
  • 所以我们可以给设置个相对定位,让city的作用效果大于tabber,这是z-index起的作用,值设高一点

补充额外知识:

  • position默认的作用没有z-index,所以这里用相对定位
  • overflow-y:auto;滚动条只在y轴滚动
  • vh:css3新单位,view height的简写,是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px
.city {
	position: relative;
  	 z-index: 9;
  	 height: 100vh;
  	 background-color: #fff;

  	 overflow-y: auto;
}

Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

但是无论跳转到哪个页面,我们都是需要隐藏tabbar的,所以我们可以给它抽离出去

抽离到css

Wenn nicht, legen Sie meta:{hideTabBar:false} fest.

Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

Zum Beispiel diese Art von Navigationsleiste: Wie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt

Bildbeschreibung hier einfügen

rrreee

Bildbeschreibung hier einfügen
Dann in der Tabbar Komponente in app.vue (Es ist der unten konfigurierte router-link). Beurteilen Sie es einfach

🎜🎜Bildbeschreibung hier einfügen🎜🎜Bildbeschreibung hier einfügen
🎜🎜🎜🎜Auf diese Weise wird die Tableiste unten nicht angezeigt🎜🎜🎜
🎜🎜🎜🎜 2. Vue-Sprungseite ist ausgeblendet. Die zweite Methode der unteren Navigations-Tableiste🎜🎜🎜⭐⭐⭐🎜🎜🎜 gibt Ihnen die Seite nach dem Sprung (d. h. die Seite, auf der Sie den Tabber ausblenden möchten)🎜 🎜Stellen Sie die Höhe auf 100 vh ein, was der Höhe der gesamten Seite entspricht. 🎜🎜Aber da Tabber die Positionierung verwendet, funktioniert es hier nicht. Wir können also eine relative Positionierung festlegen, um City effektiver zu machen als Tabber des Z-Index. Stellen Sie den Wert höher ein Die Leiste scrollt nur auf der y-Achse🎜🎜vh: neue CSS3-Einheit, Abkürzung für „View Height“, bezieht sich auf die Höhe des visuellen Fensters. Wenn die Höhe 1200 Pixel beträgt. Dann sind 10vh 120px. />🎜🎜Aber egal zu welcher Seite wir springen, wir müssen die Tableiste immer noch ausblenden, damit wir sie extrahieren können🎜🎜in die css-Datei extrahieren🎜🎜wenn wir sie verwenden möchten Fügen Sie es zur entsprechenden Seite hinzu und fertig 🎜🎜🎜🎜🎜🎜🎜🎜 Das ist es, endending~🎜🎜 (Lernvideo-Sharing: 🎜Web-Front-End-Entwicklung🎜, 🎜Grundlegendes Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonWie verstecke ich die untere Navigations-Tableiste auf der Vue-Sprungseite? Es werden zwei Methoden vorgestellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen