dcloudio / dcloudio/uni-app

H5环境下,tabBar的高度问题

Open
#4,929 0 comments 0 reactions 0 assignees View on GitHub
h5 提供了复现方案
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

在pages.js 中配置了
"tabBar": {
**"height": "172rpx",**
}

有两个页面设置了page 的样式
page {
display: flex;
background-color: #efefef;
width: 100vw;
padding: 48rpx;
**min-height: calc(100vh - var(--window-bottom));
padding-bottom: calc(var(--window-bottom) - 48rpx);**
box-sizing: border-box;
}

其中一个页面中只有一个按钮,期望按钮在tabbar上方30rpx处
.mine-container {
display: flex;
width: 100vw;
font-size: 28rpx;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
**padding-bottom: 30rpx;**
}

目前打包小程序显示和预期都是一样的,样式比较准确
但是在h5页面,在页面内容高度不足的情况下会出现按钮并没有在预期30rpx处。
实际浏览器调试样式发现,在h5下,设置的高度172rpx没有经过转换,直接变成了172px,而其它设置了rpx的均经过转换变更为px。
这个是否是预期之内的?我感觉这个应该是全部统一的吧。如果设置了rpx均要进行转换,如果设置为px 就不进行转换。

h5下方留白
![image](https://github.com/dcloudio/uni-app/assets/28389064/90e39dea-3f88-486c-90e2-8036a3755cd6)
![image](https://github.com/dcloudio/uni-app/assets/28389064/a4604b81-5ff6-4e48-b033-85292c81723b)

另看了几个issues,也有提到h5的留白问题(可能也有其它问题参与,这里只提及h5设置高度(rpx)后留白的问题),我这里引用一下, https://github.com/dcloudio/uni-app/issues/2723 https://github.com/dcloudio/uni-app/pull/2724 https://github.com/dcloudio/uni-app/issues/2567

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.