Vue跳轉(zhuǎn)頁面怎么隱藏底部導(dǎo)航tabbar

這篇文章主要介紹“Vue跳轉(zhuǎn)頁面怎么隱藏底部導(dǎo)航tabbar”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue跳轉(zhuǎn)頁面怎么隱藏底部導(dǎo)航tabbar”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十載時(shí)間我們累計(jì)服務(wù)了上千家以及全國政企客戶，如成都木托盤等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致贊揚(yáng)。

一、Vue跳轉(zhuǎn)頁面隱藏底部導(dǎo)航tabbar的第一種方法

• 在一個(gè)頁面中如果有想隱藏部分，可以寫在對(duì)應(yīng)路由的meta里面 

• 如果底部需要隱藏tabbar就設(shè)置meta:{hideTabBar:true}

• 不需要的就設(shè)置meta:{hideTabBar:false}

• 例如這種導(dǎo)航欄：

meta:{
	hideTabBar:true
}

登錄后復(fù)制

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

• 這樣下面的tabbar就不會(huì)顯示了

二、Vue跳轉(zhuǎn)頁面隱藏底部導(dǎo)航tabbar的第二種方法

• 給你跳轉(zhuǎn)后的那個(gè)頁面(即你想要隱藏tabber的頁面)

• 給它的高度設(shè)為100vh,是整個(gè)頁面的高度

• 但是因?yàn)閠abber用過定位，所以這里不起作用

• 所以我們可以給設(shè)置個(gè)相對(duì)定位，讓city的作用效果大于tabber，這是z-index起的作用，值設(shè)高一點(diǎn)

補(bǔ)充額外知識(shí)：

• position默認(rèn)的作用沒有z-index,所以這里用相對(duì)定位

• overflow-y:auto;滾動(dòng)條只在y軸滾動(dòng)

• vh：css3新單位，view height的簡(jiǎn)寫，是指可視窗口的高度。假如高度是1200px的話。那10vh就是120px

.city {
	position: relative;
  	 z-index: 9;
  	 height: 100vh;
  	 background-color: #fff;

  	 overflow-y: auto;
}

但是無論跳轉(zhuǎn)到哪個(gè)頁面，我們都是需要隱藏tabbar的，所以我們可以給它抽離出去

抽離到css文件里面

想用的時(shí)候給對(duì)應(yīng)的頁面添加上就OK了

關(guān)于“Vue跳轉(zhuǎn)頁面怎么隱藏底部導(dǎo)航tabbar”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

本文題目：Vue跳轉(zhuǎn)頁面怎么隱藏底部導(dǎo)航tabbar
網(wǎng)站網(wǎng)址：http://muchs.cn/article2/pdpooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站制作、建站公司、關(guān)鍵詞優(yōu)化、商城網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)