Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
827422d9
U
uni-app
项目概览
DCloud
/
uni-app
24 天 前同步成功
通知
702
Star
38704
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
827422d9
编写于
8月 27, 2019
作者:
W
wanganxp
提交者:
GitHub
8月 27, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update frame.md
上级
5586dd64
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
25 addition
and
3 deletion
+25
-3
docs/frame.md
docs/frame.md
+25
-3
未找到文件。
docs/frame.md
浏览文件 @
827422d9
...
...
@@ -348,7 +348,7 @@ uni-app 提供内置 CSS 变量
|CSS变量|描述|5+App|小程序|H5|
|:-|:-|:-|:-|:-|
|--status-bar-height|系统状态栏高度|[系统状态栏高度](http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight)|25px|0|
|--status-bar-height|系统状态栏高度|[系统状态栏高度](http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight)
、nvue注意见下
|25px|0|
|--window-top|内容区域距离顶部的距离|0|0|NavigationBar 的高度|
|--window-bottom|内容区域距离底部的距离|0|0|TabBar 的高度|
...
...
@@ -357,14 +357,14 @@ uni-app 提供内置 CSS 变量
- ``var(--status-bar-height)`` 此变量在微信小程序环境为固定 ``25px``,在 5+App 里为手机实际状态栏高度。
- 当设置 ``"navigationStyle":"custom"`` 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 ``var(--status-bar-height)`` 的 view 放在页面顶部,避免页面内容出现在状态栏。
- 由于在H5端,不存在原生导航栏和tabbar,也是前端div模拟。如果设置了一个固定位置的居底view,在小程序和App端是在tabbar上方,但在H5端会与tabbar重叠。此时可使用`--window-bottom`,不管在哪个端,都是固定在tabbar上方。
- 目前 nvue
还不支持css变量
- 目前 nvue
在App端,还不支持 `--status-bar-height`变量,替代方案是在页面onLoad时通过uni.getSystemInfoSync().statusBarHeight获取状态栏高度,然后通过style绑定方式给占位view设定高度。下方提供了示例代码
**代码块**
快速书写css变量的方法是:在css中敲hei,在候选助手中即可看到3个css变量。(HBuilderX 1.9.6以上支持)
示例:
示例
1 - 普通页面使用css变量
:
```
html
<template>
...
...
@@ -398,6 +398,28 @@ uni-app 提供内置 CSS 变量
</style>
```
示例2 - nvue页面获取状态栏高度
```
html
<template>
<view
class=
"content"
>
<view
:style=
"{ height: iStatusBarHeight + 'px'}"
></view>
</view>
</template>
<script>
export default {
data() {
return {
iStatusBarHeight:0
}
},
onLoad() {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
}
}
</script>
```
### 固定值
`uni-app` 中以下组件的高度是固定的,不可修改:
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录