2***@qq.com
2***@qq.com
  • 发布:2021-10-07 21:28
  • 更新:2021-10-09 14:52
  • 阅读:3242

uniapp tabbar隐藏的问题

分类:uni-app

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

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

jxtian

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;  
  }
zzdev

zzdev

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

  • 2***@qq.com (作者)

    好的,非常感谢


    2021-10-09 12:21

惊悚的毛毛虫

惊悚的毛毛虫

  • 2***@qq.com (作者)

    好的,非常感谢


    2021-10-09 12:21

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