uni-app获取安全区域

embedded/2024/11/22 4:22:23/

2024年8月2日
使用自定义导航栏的uni-app项目在真机演示时,可能会出现页面内容被手机的刘海或者状态栏给遮挡了,或者在小程序上给胶囊按钮给档住了。这时候就需要获取刘海屏状态了和胶囊按钮的高度来获取安全渲染区域.

1. CSS内置变量

来自uni-aap官网:https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-变量

–status-bar-height: 系统状态栏高度
–window-top: 内容区域距离顶部的距离
–window-bottom: 内容区域距离底部的距离

  • 不同平台适配不一致,详细查阅参考地址

具体用例

避开刘海屏

//状态栏占位组件样式
.status_bar{height:var(--status-bar-height);
}

避开NavigationBar和TabBar的安全区域

//安全区域组件样式
.safeArea{margin-top:var(--window-top);margin-bottom:var(--window-bottom);
}

2. uni.getWindowInfo()

https://uniapp.dcloud.net.cn/api/system/getWindowInfo.html#getwindowinfo-harmonyos-next-兼容性

获取窗口信息,基于本文我们需要的窗口信息为safeAreaInsets(安全区域与屏幕边的插入值)和safeArea(安全区域)
safeAreaInsets的属性有:

  • left 安全区域左侧插入位置
  • right 安全区域右侧插入位置
  • top 安全区顶部插入位置
  • bottom 安全区域底部插入位置
    safeArea的属性有:
  • width 安全区域的宽度,单位逻辑像素
  • height 安全区域的高度,单位逻辑像素

具体用例

获取一个去除状态栏、底部滑动条的渲染区域

<template><view class='safeArea'></view>
</template><script>uni.createSelectorQuery().select('.safeArea').fields({ computedStyle: [ 'height','marginTop','marginBottom'] }, (data) => {//获取安全区域data.hetght=`${uni.getWindowInfo().safeArea.height}`//获取安全区域距离屏幕边的距离data.marginTop=`${uni.getWindowInfo().safeAreaInsets.top}`data.marginBottom=`${uni.getWindowInfo().safeAreaInsets.bottom}`}).exec()
</script>

http://www.ppmy.cn/embedded/139521.html

相关文章

32.2 prometheus倒排索引统计功能

本节重点介绍 : 获取采集端的高基数metrics的tsdb页面解析tsdb统计函数Stats源码解读 依赖倒排索引统计 获取采集端的高基数metrics tsdb页面解析 Top 10 label names with value count&#xff1a; 标签中value最多的10个Top 10 series count by metric names&#xff1a…

如何提高代理IP的并发能力

在数据采集的领域&#xff0c;时间就是金钱&#xff0c;效率就是生命。代理IP的并发能力直接关系到我们能否快速、高效地获取数据。那么&#xff0c;如何提高代理IP的并发能力呢&#xff1f;今天&#xff0c;我们就来聊聊这个话题&#xff0c;为你的数据采集项目提速。 并发&a…

Vue项目开发 element-UI 前端实现 1到10排列选择的按钮

在 Element UI 中&#xff0c;你可以通过 el-button 来实现按钮的排列选择&#xff0c;例如让用户选择 1 到 10 之间的数字。为了实现这一功能&#xff0c;我们可以使用 v-for 来动态生成 1 到 10 的按钮&#xff0c;并通过按钮点击事件来更新所选的数字。 以下是一个基本的实…

【高等数学学习记录】隐函数及由参数方程所确定的函数的导数、相关变化率

一、知识点 &#xff08;一&#xff09;隐函数的导数 显函数 对于形如 y s i n x ysinx ysinx 这种等号左端是因变量&#xff0c;右端是含有自变量的式子&#xff0c;当自变量取定义域内任一值时&#xff0c;由这个式子能确定对应的函数值&#xff0c;这种方式表达的函数叫做…

FPGA上板项目(六)——UART测试,串口收发

目录 实验内容串口接收模块模块框图时序波形仿真结果 顶层模块设计模块框图时序波形代码调整仿真结果上板测试 实验内容 将接收到的数据发送出去&#xff0c;实现串口回环。 串口发送的内容 FPGA上板项目&#xff08;五&#xff09;——UART测试&#xff0c;串口发送 已做过阐…

力扣 LeetCode 111. 二叉树的最小深度(Day7:二叉树)

解题思路&#xff1a; 用后序遍历 题目要求的最小深度为根节点到叶子节点的最小深度&#xff0c;注意是到根节点&#xff0c;所以如图所示假设&#xff08;没有9这个节点&#xff09;是需要返回3的&#xff0c;而不是1&#xff08;根节点左子树为空的情况&#xff09;&#x…

基于yolov8、yolov5的植物类别识别系统(含UI界面、训练好的模型、Python代码、数据集)

项目介绍 项目中所用到的算法模型和数据集等信息如下&#xff1a; 算法模型&#xff1a;     yolov8、yolov8 SE注意力机制 或 yolov5、yolov5 SE注意力机制 &#xff0c; 直接提供最少两个训练好的模型。模型十分重要&#xff0c;因为有些同学的电脑没有 GPU&#xff0…

用sqlmap工具打sqli-labs前20关靶场

这个星期我们用手动注入打了前20关靶场&#xff0c;今天我们用sqlmap直接梭哈前20关 1.介绍sqlmap sqlmap是一个自动化的SQL注入工具&#xff0c;其主要功能是扫描&#xff0c;发现并利用给定的URL和SQL注入漏洞。 2.下载和使用sqlmap 官方下载地址&#xff1a;GitHub - sq…