uniapp获取底部安全距离以及状态栏高度等
更新时间：2022年10月17日 16:05:06 作者：zhuangwei_8256
最近在用uniapp开发的时候遇到了一些问题,下面这篇文章主要给大家介绍了关于uniapp获取底部安全距离以及状态栏高度等的相关资料,需要的朋友可以参考下
工作中我们常常需要设置一些特定样式：
- 固定底部按钮
- 自定义顶部导航栏
- ……
固定底部按钮
这里需要注意的是，真机运行时底部时IOS是存在安全距离的，这个时候就需要我们处理一下
.u-fixed-b {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 24rpx;
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
z-index: 50;
}
- 获取上安全距离： env(safe-area-inset-top)
- 获取左安全距离：env(safe-area-inset-left)
- 获取右安全距离：env(safe-area-inset-right)
- 获取下安全距离：env(safe-area-inset-bottom)
可以在固定底部的盒子加下内下边距 padding-bottom: env(safe-area-inset-bottom) 避免元素被遮挡
自定义顶部导航栏
自定义导航栏需要注意的是：顶部存在状态栏，也就是显示信号、时间等信息的状态栏；
<template> <view class="container"> <!-- 自定义顶部导航 --> <uni-nav-bar left-icon="left" backgroundColor="#FFFFFF" title="顶部导航" @clickLeft="backPage"></uni-nav-bar> <!-- 页面内容 --> <view class="page-content"> <!-- ---------- --> </view> </view> </template>
.container {
background-color: #ffffff;
height: 100%;
padding-top: var(--status-bar-height);
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
获取状态栏高度：var(–status-bar-height)
可以在页面的最外层的盒子加内上边距 padding-top: var(–status-bar-height)避免顶部导航栏与状态栏重叠；并且需要给最外层盒子设置背景色与页面背景色一致，不然会出现状态栏的背景色和页面背景色不一致的情况；
其他
另外uniapp 还有一些其他的css 变量（详情查看官方文档）：
- 内容区域距离顶部的距离：var(–window-top);
- 内容区域距离底部的距离：var(–window-bottom);
总结
到此这篇关于uniapp获取底部安全距离以及状态栏高度等的文章就介绍到这了,更多相关uniapp获取底部安全距离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在TypeScript中迭代对象键Object.keys不起作用的原因和解决方案
在TypeScript中迭代对象键object keys可能是一场噩梦,以下是我所知道的所有解决方案,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-10-10
本文将通过一些常见的FAQ来带大家一起学习一下怎么用工具定位javascript里的内存问题，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-06-06
本文主要分享了javascript实现向上文字轮播功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了js实现简单的贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
这篇文章主要介绍了Javascript的call、apply，其作用基本相同，但也有略微的区别，需要的朋友可以参考下2015-12-12
在很多情况下，点要素图层中的要素数量可能会成百上千，如果一个点要素图层中的点数量很多，我们就会采取图层聚合的方式对其进行处理，本文就来介绍一下，感兴趣的可以了解一下2021-09-09
一文彻底理解js原生语法prototype,__proto__和constructor
作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,下面这篇文章主要给大家介绍了关于js原生语法prototype,__proto__和constructor的相关资料,需要的朋友可以参考下2021-10-10
下面小编就为大家带来一篇JSON 对象未定义错误的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
这篇文章主要介绍了详述 Sublime Text 打开 GBK 格式中文乱码的解决方法，非常具有实用价值，需要的朋友可以参考下2017-10-10
本篇文章主要介绍了微信小程序-横向滑动scroll-view隐藏滚动条的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
最新评论