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获取底部安全距离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS实现简易图片轮播效果的方法,实例分析了javascript操作图片实现轮播特效的技巧,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了使用js获取身份证年龄的示例代码，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了js控制div弹出层实现方法,可实现点击链接弹出div浮动层,且背景色变暗的效果,是一款非常实用的特效源码,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了Bootstrap Table服务器分页与在线编辑应用总结 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了原生javaScript实现图片延时加载的方法,无需通过载入jQuery脚本即可实现图片的延时加载效果,是非常实用的技巧,需要的朋友可以参考下2014-12-12
这篇文章主要为大家介绍了Javascript中神奇的this，何为this？this的作用有哪些、以及this神奇的绑定规则，感兴趣的小伙伴们可以参考一下2016-01-01
本文分享了基于JS实现的随机数字抽签的实例代码。小编认为具很好的参考价值，感兴趣的朋友可以看下2016-12-12
这篇文章主要介绍了详解JavaScript中哪一种循环最快呢，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
一段超强的javascript代码解密方法...2007-06-06
本文主要介绍了Javascript中的 “&” 和 “|” 的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论