Vue 점프 페이지에서 하단 탐색 탭 표시줄을 숨기는 방법은 무엇입니까? 두 가지 방법이 소개됩니다

Vue페이지로 이동할 때 하단 탐색 탭바를 숨기는 방법은 무엇입니까? 다음 글에서는 하단 탐색 탭바를 숨기는 두 가지 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

1. Vue 점프 페이지에서 하단 탐색 탭바를 숨기는 첫 번째 방법

• 페이지에서 일부 부분을 숨기고 싶다면 해당 경로의 메타에 작성하면 됩니다. [학습 영상 공유] : vue 영상 튜토리얼, 웹 프론트엔드 영상】

• 하단 탭바를 숨겨야 하는 경우 meta:{hideTabBar:true}를 설정하세요. meta:{hideTabBar:true}

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

• 例如这种导航栏：

meta:{
    hideTabBar:true
}

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

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

二、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;
}

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

抽离到css

그렇지 않은 경우 메타:{hideTabBar:false}

를 설정하세요. 예를 들어 다음 탐색 모음은 다음과 같습니다.

rrreee

그런 다음 tabbar 구성 요소에서 app.vue (하단에 구성된 router-link입니다) 그냥 판단하세요

🎜🎜🎜🎜
🎜🎜🎜🎜이렇게 하면 아래 탭바가 표시되지 않습니다🎜🎜🎜
🎜🎜🎜🎜 2. Vue 점프 페이지 숨기기 하단 탐색 탭바🎜🎜🎜⭐⭐⭐🎜🎜🎜의 두 번째 방법은 점프 후 페이지(즉, 탭버를 숨기고 싶은 페이지)를 제공합니다🎜🎜Set 전체 페이지의 높이인 100vh까지 🎜🎜하지만 tabber는 위치 지정을 사용하기 때문에 여기서는 작동하지 않습니다🎜🎜그래서 우리는 tabber보다 도시를 더 효과적으로 만들기 위해 상대 위치를 설정할 수 있습니다. 이것이 z의 역할입니다. -index.값을 더 높게 설정하세요🎜🎜추가 추가 지식: 🎜🎜🎜위치의 기본 기능에는 z-인덱스가 없으므로 여기서는 상대 위치 지정이 사용됩니다.🎜🎜overflow-y:auto; y축 스크롤🎜🎜vh: css3 새 단위, view height의 약어, 시각적 창의 높이를 나타냅니다. 높이가 1200px인 경우. 그러면 10vh는 120px🎜rrreee🎜🎜🎜하지만 어느 페이지로 이동하든 탭바를 숨겨야 추출이 가능하므로🎜🎜사용하고 싶을 때 css 파일로 추출🎜🎜그냥 해당 페이지에 추가하면 끝🎜🎜🎜🎜🎜🎜🎜🎜 끝이에요~🎜🎜 (학습 영상 공유 : 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 Vue 점프 페이지에서 하단 탐색 탭 표시줄을 숨기는 방법은 무엇입니까? 두 가지 방법이 소개됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!