How to hide the bottom navigation tabbar on Vue jump page? Two methods are introduced

VueHow to hide the bottom navigation tabbar on the jump page? The following article will introduce you to two methods of hiding the bottom navigation tabbar. I hope it will be helpful to you!

1. The first method to hide the bottom navigation tabbar in Vue jump page

• If you want to hide some parts of a page, you can write it in the meta of the corresponding route [Learning video sharing: vue video tutorial, web front-end video]

• If you need to hide the tabbar at the bottom, set itmeta:{hideTabBar:true}

• If not, set itmeta :{hideTabBar:false}

• ##For example, this kind of navigation bar:

##

meta:{
	hideTabBar:true
}

Then the
• tabbar

  component in app.vue (which is the router configured at the bottom -link), just judge

## like this The tabbar will not be displayed

##2. Vue jump page hides the bottom navigation tabbar The second method

⭐⭐⭐

gives you the page after the jump (that is, the page you want to hide the tabber on)

Set its height to 100vh, which is the height of the entire page

• But because tabber has used positioning, it does not work here
• So we can set a relative positioning to let the city function The effect is greater than tabber. This is the role of z-index. Set the value higher.
Supplementary additional knowledge:

The default role of position does not have z-index, so here Use relative positioning

overflow-y:auto; the scroll bar only scrolls on the y-axis

• vh: css3 new unit, the abbreviation of view height, refers to the height of the visual window. If the height is 1200px. Then 10vh is 120px

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

• But no matter which page we jump to, we need to hide the tabbar, so we can extract it

  Extract it to the

  css

  file

  When you want to use it, just add it to the corresponding page

  

  That’s it, endingending~

  (Learning video sharing:

  web front-end development

  ,

  Basic programming video

  )

  The above is the detailed content of How to hide the bottom navigation tabbar on Vue jump page? Two methods are introduced. For more information, please follow other related articles on the PHP Chinese website!