uniapp微信小程序解决上方刘海屏遮挡

news2024/11/14 13:30:35

问题

在有刘海屏的手机上,我们的文字和按钮等可能会被遮挡   应该避免这种情况

解决

const SYSTEM_INFO = uni.getSystemInfoSync();

export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;

export const getTitleBarHeight = ()=>{
	if(uni.getMenuButtonBoundingClientRect){
		let {top,height} = uni.getMenuButtonBoundingClientRect();
		return height + (top - getStatusBarHeight())*2		
	}else{
		return 40;
	}
}

export const  getNavBarHeight = ()=> getStatusBarHeight()+getTitleBarHeight();
import {getStatusBarHeight,getTitleBarHeight,getNavBarHeight} from "@/utils/system.js"

uni.getSystemInfoSync() 获取机型状态

uni.getMenuButtonBoundingClientRect() 获取胶囊按钮状态


getStatusBarHeight: 获取安全高度 状态栏高度

getTitleBarHeight:标题栏高度 胶囊按钮高度

getNavBarHeight:两者相加的(填充层)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1465295.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

k8s(2)

目录 一.二进制部署k8s 常见的K8S安装部署方式: k8s部署 二进制与高可用的区别 二.部署k8s 初始化操作: 每台node安装docker: 在 master01 节点上操作; 准备cfssl证书生成工具:: 执行脚本文件: 拉入etcd压缩包…

Spring Boot应用集成Actuator端点自定义Filter解决未授权访问的漏洞

一、前言 我们知道想要实时监控我们的应用程序的运行状态,比如实时显示一些指标数据,观察每时每刻访问的流量,或者是我们数据库的访问状态等等,需要使用到Actuator组件,但是Actuator有一个访问未授权问题,…

2023全新UI千月影视APP源码 | 前后端完美匹配、后端基于ThinkPHP框架

应用介绍 本文来自:2023全新UI千月影视APP源码 | 前后端完美匹配、后端基于ThinkPHP框架 - 源码1688 简介: 2023全新UI千月影视APP源码 | 前后端完美匹配、后端基于thinkphp框架 图片:

索引大战:探秘InnoDB数据库中B树和Hash索引的优劣

欢迎来到我的博客,代码的世界里,每一行都是一个故事 索引大战:探秘InnoDB数据库中B树和Hash索引的优劣 前言B树索引的深度解析Hash索引的奥秘揭晓性能对比分析 前言 在当今软件开发的世界中,数据库扮演着至关重要的角色。而InnoD…

怎么用sora赚第一桶金?

🌟解锁文字变视频的强大功能!🌟 ✨欢迎来到 Sora Cand,一个革命性的网站,利用 OpenAI 的 Sora 模型帮你把文字变成酷炫的视频!✨ 想象一下,你的文字从纸上跳出来,变成引人入胜的视觉…

如何用IP地址找到实际位置?

在互联网世界中,每个设备都有一个独特的标识,那就是IP地址。它不仅是设备在网络中的“身份证”,还承载着设备在网络中的位置信息。那么,我们是否可以通过IP地址来找到设备的实际位置呢?本文将深入探讨这一问题。 一、I…

#11vue3中使用el-dialog展示与关闭交由父组件控制的写法

目录 1、法一:通过defineEmits调用父组件方法 1.1、父组件 1.2、子组件(CONTENT) 2、法二:通过difineExpose暴露子组件属性 2.1、父组件 2.2、子组件(Child) 1、法一:通过defineEmits调用…

【C语言】注释

🎈个人主页:豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:C语言 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步&…

vue3 toRefs之后的变量修改方法

上效果 修改值需要带上解构之前的对象名obj&#xff0c; changeName:()>{ // toRefs 解决后变量修改值方法&#xff1a; 解构前变量.字段新值 obj.name FEIFEI; } } 案例源码 <!DOCTYPE html> <html> <head><me…

算法——模拟

1. 什么是模拟算法&#xff1f; 官方一点来说 模拟算法&#xff08;Simulation Algorithm&#xff09;是一种通过模拟现实或抽象系统的运行过程来研究、分析或解决问题的方法。它通常涉及创建一个模型&#xff0c;模拟系统中的各种事件和过程&#xff0c;以便观察系统的行为&a…

从单体服务到微服务:多模式 Web 应用开发记录<一>背景全局变量优化

背景 最近在做一个事&#xff1a;下线一个超级大单体服务。单一统计代码行数其实不够全面&#xff0c;反正项目 git clone 下来文件就有这么大&#xff1a; 这是一个已经存在了十年以上的服务&#xff0c;随着业务的发展&#xff0c;这个服务已经无法满足我们的需求。 我们统…

胡夏爱意满满,浪漫尽显,心动不止。

♥ 为方便您进行讨论和分享&#xff0c;同时也为能带给您不一样的参与感。请您在阅读本文之前&#xff0c;点击一下“关注”&#xff0c;非常感谢您的支持&#xff01; 文 |猴哥聊娱乐 编 辑|徐 婷 校 对|侯欢庭 全网热议的胡夏暗恋文学&#xff0c;浪漫指数爆表&#xff01…

力扣382.链表随机节点

Problem: 382. 链表随机节点 文章目录 题目描述思路复杂度Code 题目描述 思路 由水塘抽样易得&#xff0c;当遇到i个元素&#xff0c;有 1 / i 1/i 1/i的概率选择该元素&#xff1b;则在实际操作中我们定义一个下标i从1开始遍历每次判断rand() % i 0&#xff08;该操作就是判断…

Verilog刷题笔记35

题目&#xff1a; Create a 1-bit wide, 256-to-1 multiplexer. The 256 inputs are all packed into a single 256-bit input vector. sel0 should select in[0], sel1 selects bits in[1], sel2 selects bits in[2], etc. 解法&#xff1a; module top_module( input [255:…

猜谜“龘”人速来!网安人元宵灯谜有礼了

​​灯笼高挂&#xff0c;星光璀璨&#xff0c;品味糯叽叽的元宵&#xff0c;以灯谜为媒&#xff0c;亚信安全邀你共赴元宵佳节。 热辣滚烫的班先别上了&#xff0c;文末有奖竞猜&#xff0c;快来参与&#xff01; 喜闹元宵 谜面一&#xff1a;一路向上成大业&#xff1b; 谜…

HTML5新婚、年会、各种聚会的现场抽奖活动(附源码)

文章目录 1.抽奖平台设计来源1.1 主界面效果1.2 抽奖效果1.3 中奖效果 2.效果和源码配置2.1 动态效果2.2 人员信息配置2.3 奖品信息配置2.4 抽奖音效配置2.5 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/deta…

第一节-docker介绍

这里写自定义目录标题 一、什么是docker二、docker和virtual machine三、docker架构 一、什么是docker docker是一种容器引擎&#xff0c;用于构建、部署、运行应用程序和服务。 docker的每个容器通过沙箱机制相互隔离&#xff0c;互不干扰。 docker容器技术相比传统的虚拟机有…

六、回归与聚类算法 - 模型保存与加载

目录 1、API 2、案例 欠拟合与过拟合线性回归的改进 - 岭回归分类算法&#xff1a;逻辑回归模型保存与加载无监督学习&#xff1a;K-means算法 1、API 2、案例

费舍尔FISHER金属探测器探测仪维修F70

美国FISHER LABS费舍尔地下金属探测器&#xff0c;金属探测仪等维修&#xff08;考古探金银铜探宝等仪器&#xff09;。 费舍尔F70视听目标ID金属探测器&#xff0c;Fisher 金属探测器公司成立于1931年&#xff0c;在实验条件很艰苦的情况下&#xff0c;研发出了地下金属探测器…

昨天Google发布了最新的开源模型Gemma,今天我来体验一下

前言 看看以前写的文章&#xff0c;业余搞人工智能还是很早之前的事情了&#xff0c;之前为了高工资&#xff0c;一直想从事人工智能相关的工作都没有实现。现在终于可以安静地系统地学习一下了。也是一边学习一边写博客记录吧。 昨天Google发布了最新的开源模型Gemma&#xf…