uniapp tabbar隐藏的问题

分类：uni-app

uniapp

如图，官方模板里，大屏幕的时候没有底部的tabbar，小屏幕的时候就会显示出来，虽然知道用uni.hideTabBar()这个方法，但是想知道官方模板是怎么做到的，求大佬们给个思路

2021-10-07 21:28 负责人:jxtian 分享

3 个回复

hello-uniapp 的这个效果不是媒体查询实现的，当前页不是 tabbar 页面（是pages/component/view/view页），所以没有显示tabbar。如果不想在PC上显示 tabbar 页面可以参考 hello-uniapp，在 app 首页加载时跳转一个非tabbar 页

如果是想在有leftwindow等窗体的时候，隐藏tabar页面的tabbar，可以用css这么做（好处是可以和leftwindow等窗体联动）：

  .uni-app--showleftwindow  +  .uni-tabbar-bottom {  
    display: none;  
  }

可以用媒体查询，也可以页面加载时获取页面宽度来调整布局，甚至监听页面大小改变，hello-uniapp 看起来是脚本判断屏幕宽高加一点媒体查询，因为你拖动控制台有些组件并未隐藏，做到了自适应，没有完全响应式

match-media媒体查询标签

该问题目前已经被锁定, 无法添加新回复