joelewis
joelewis
  • 发布:2019-08-19 11:35
  • 更新:2019-08-19 14:23
  • 阅读:3665

如下图,uni-app h5页面底部菜单在chrome里被tabbar遮挡住,而在小程序和app里显示没问题

分类:uni-app

菜单样式如下:
.cart-bottom{
position: fixed;
width: 100%;
height: 87rpx;
bottom:0;
background: white;
}

2019-08-19 11:35 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

APP 和小程序的导航栏和 tabbar 均是原生控件,元素区域坐标是不包含原生导航栏和 tabbar 的;而 H5 里导航栏和 tabbar 是 div 模拟实现的,所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题,uni-app 新增了2个css变量:--window-top 和 --window-bottom,这代表了页面的内容区域距离顶部和底部的距离。举个实例,如果你想在原生tabbar 上方悬浮一个菜单,之前写 bottom:0。这样的写法编译到 h5 后,这个菜单会和 tabbar 重叠,位于屏幕底部。而改为使用 bottom:var(--window-bottom),则不管在 app 下还是在h5下,这个菜单都是悬浮在 tabbar 上浮的。这就避免了写条件编译代码。当然仍然也可以使用 H5 的条件编译处理界面的不同。

  • joelewis (作者)

    谢谢

    2019-08-19 14:54

joelewis

joelewis (作者)

哪位知道,能看下吗?

要回复问题请先登录注册