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实现的简单小钟表功能示例
这篇文章主要介绍了原生JS实现的简单小钟表功能,涉及javascript结合定时器的数值运算与页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
2018-08-08
微信小程序vant弹窗组件的实现方式
这篇文章主要介绍了小程序vant弹窗组件的实现方式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-02-02
微信小程序点击保存图片到本机功能
这篇文章主要介绍了微信小程序点击保存图片到本机功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
JS闭包用法实例分析
这篇文章主要介绍了JS闭包用法,结合具体实例形式分析了javascript闭包的原理、执行步骤与相关操作技巧,需要的朋友可以参考下
2017-03-03
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Jasmine是一个Javascript的测试工具，在Karma上运行Jasmine可完成Javascript的自动化测试、生成覆盖率报告等。本文不包含Jasmine的使用细节，这几天我会写一篇Jasmine的入门文章，有兴趣的朋友到时候可以看一下
2015-12-12
禁止空格提交表单的js代码
只要有文本框的地方按下回车键就会自动刷新.最后终于找到了解决的方法在此与大家分享下，感兴趣的朋友不要错过
2013-11-11
javascript转换静态图片，增加粒子动画效果
这篇文章主要介绍了javascript转换静态图片，增加粒子动画效果,非常的炫酷，需要的朋友可以参考下
2015-05-05
JS实现简单的todoList(记事本)效果
这篇文章主要为大家详细介绍了JS实现简单的todoList（记事本）效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
监控微信小程序中的慢HTTP请求过程详解
这篇文章主要介绍了监控微信小程序中的慢HTTP请求过程详解，Fundebug 的微信小程序监控插件在 0.5.0 版本已经支持监控 HTTP 请求错误，在小程序中通过wx.request发起 HTTP 请求，如果请求失败，会被捕获并上报,需要的朋友可以参考下
2019-07-07
前端显示json格式化示例代码
项目开发过程中遇到JSON字符串回显的情况,直接显示的话效果很丑,不方便查看,因此需要在前端页面对JSON进行格式化显示,下面这篇文章主要给大家介绍了关于前端显示json格式化的相关资料,需要的朋友可以参考下
2024-03-03