Home  >  Article  >  Web Front-end  >  How to hide the bottom navigation tabbar on Vue jump page? Two methods are introduced

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

青灯夜游
青灯夜游forward
2022-11-18 20:47:492576browse

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!

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

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:

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

meta:{
	hideTabBar:true
}

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

    Then the
  • tabbar

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

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

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

## like this The tabbar will not be displayed

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

##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

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

css

file

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

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

That’s it, endingending~

How to hide the bottom navigation tabbar on Vue jump page? Two methods are introduced (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!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete