uniapp 自定义页面顶部导航栏

效果图

1.移除原生导航栏

{"path": "pages/common/homePage/homePage","style": {"navigationBarTitleText": "","navigationStyle": "custom"}
}

2.获取不同手机顶部自带 电量高度、信号、时间导航栏高度  和   状态栏和胶囊按钮的间隙高度

如图:红色背景色为手机顶部自带高度,黄色背景为状态栏和胶囊按钮间隙高度

 

<view class="" :style="{height:statusBarHeight+'px'}" style="background-color: red;" ></view>
<view style="display: flex;flex-direction: row;align-items: center;width:710rpx; background-color: yellow;" :style="{height:navBarHeight+'px'}"></view>
onShow() {this.statusBarHeight = uni.getSystemInfoSync().statusBarHeightthis.menuButtonInfo = uni.getMenuButtonBoundingClientRect()this.navBarHeight = (this.menuButtonInfo.bottom - this.statusBarHeight) +                 (this.menuButtonInfo.top - this.statusBarHeight)console.log("顶部电量高度");console.log(uni.getSystemInfoSync().statusBarHeight);console.log("胶囊数据宽高数据");console.log(uni.getMenuButtonBoundingClientRect());console.log("状态栏与胶囊按钮中的空隙");console.log((this.menuButtonInfo.bottom - this.statusBarHeight) + (this.menuButtonInfo.top - this.statusBarHeight));},

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

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

相关文章

比较两个对象相同对象不同值

/** * param newValue 新值 * param oldValue 旧值 * return key 字段名 value 旧值 */ public static Map<String, Object> compare(Object newValue, Object oldValue, List<String> filterList) { Map<String, Object> compareMap new HashMap<>()…

课程设计——基于FPGA的交通红绿灯控制系统(源代码)

摘要&#xff1a; 本课程设计旨在设计一个基于FPGA&#xff08;现场可编程门阵列&#xff09;的交通红绿灯控制系统。该系统模拟了实际道路交叉口的红绿灯工作场景&#xff0c;通过硬件描述语言&#xff08;如Verilog或VHDL&#xff09;编写源代码实现。系统包含三个主要部分&a…

我又学会了使用Range实现网络文件下载的断点续传

文章目录 前言1、Range请求头1.1、概述1.2、使用限制1.3、范围请求1.4、预防资源变更 2、断点续传下载实现2.1、流程设计2.2、代码实现2.3、运行结果 3、RandomAccessFile4、思维拓展参考资料 前言 在某次摸鱼的过程中&#xff0c;老大突然后面冒出来说要做一个拉取文件到本地…

复位电路。

复位电路一般用到 电容电阻。 有的 是低电平复位&#xff0c;有的是高电平复位。 这里的电容的作用&#xff0c;上电自动复位。 参考&#xff1a; 此时 电容还能起到 抗干扰的作用。吸收 噪声。 电阻的作用&#xff0c;不是很理解&#xff0c;感觉是 在 上拉没有形成之前&am…

ninja构建笔记

在ninja构建系统中&#xff0c;“rule”和“build”这两个词通常关联但扮演着不同的角色。下面我会详细解释它们的区别&#xff1a; ### Rule (规则) 在构建系统中&#xff0c;“rule”通常指的是构建系统用来指导如何构建文件或者目标的指令集。它定义了一组转换输入到输出的…

数据库-单表查询-基本查询

查询数据表中指定字段的内容&#xff1a; SELECT 字段名 FROM 表名; 同时查询多个字段下的内容: SELECT 字段名1, 字段名2 FROM 表名; 查询数据表中的所有内容: SELECT * FROM 表名; 带IN关键字的查询: SELECT 字段名 FROM 表名 WHERE 字段名 IN (n1,n2,n3,...); IN关键字…

lora 继续训练

lora 继续训练 一般正常lora训练完模型后我们只保存其lora参数&#xff0c;然后与base模型进行合并。记录一下训练完保存lora后&#xff0c;继续再对lora训练的步骤。 base_model AutoModelForCausalLM.from_pretrained(base_model_id) base_model.enable_input_require_gra…

Multi-Head RAG:多头注意力的激活层作为嵌入进行文档检索

现有的RAG解决方案可能因为最相关的文档的嵌入可能在嵌入空间中相距很远&#xff0c;这样会导致检索过程变得复杂并且无效。为了解决这个问题&#xff0c;论文引入了多头RAG (MRAG)&#xff0c;这是一种利用Transformer的多头注意层的激活而不是解码器层作为获取多方面文档的新…

@Transactional实现原理及失效的三种情况

Transactional实现原理 Transactional是spring中定义的事务注解&#xff0c;在方法或类上加该注解开启事务。主要是通过反射获取当前对象的注解信息&#xff0c;利用AOP&#xff08;代理模式&#xff09;对编程式事务进行封装实现 // // Source code recreated from a .class f…

Win11版本21H2怎么升级为23H2?升级详细步骤在此!

在Win11电脑操作中&#xff0c;用户目前使用的版本是21H2&#xff0c;现在想体验23H2版本的先进功能&#xff0c;但不知道要怎么操作才能将系统版本升级为23H2&#xff1f;接下来小编给大家介绍详细的升级方法步骤&#xff0c;助力大家轻松完成系统版本升级操作。 方法一&#…

PostgreSQL源码分析——CHECKPOINT

checkpoint源码分析 因为检查点checkpoint相关的代码不是一篇文章就能分析完的&#xff0c;所以&#xff0c;相关的代码与逻辑可能会不连续&#xff0c;需要后续结合上下文理解。这里只列出了其中一部分。 其核心代码在&#xff1a;src/backend/postmaster/checkpointer.c以及…

05眼动识别软件详情2波形优化-滤波

对应视频链接点击直达 01项目点击下载&#xff0c;可直接运行&#xff08;含数据库&#xff09; 05眼动识别软件详情2 对应视频链接点击直达期望的数据展示数据波形对比如何实现几种常用滤波介绍维纳滤波巴特沃斯滤波器中值滤波排序滤波 推荐 结语其他以下是废话 原始数据的波…

CentOS 7.9上创建的JBOD阵列恢复(二)

系列文章目录 CentOS 7.9上创建JBOD&#xff08;一&#xff09; CentOS 7.9检测硬盘坏区、实物定位&#xff08;三&#xff09; 文章目录 系列文章目录前言一、用命令查看是否认到盘二、直接组JBOD三、挂载到新目录四、查看原数据总结 前言 在CentOS 7.9上创建了一个软阵列JB…

代码随想录算法训练营第四十二天| 1049. 最后一块石头的重量 II、 494. 目标和

LeetCode 1049. 最后一块石头的重量 II 题目链接&#xff1a;https://leetcode.cn/problems/last-stone-weight-ii/description/ 文章链接&#xff1a;https://programmercarl.com/1049.%E6%9C%80%E5%90%8E%E4%B8%80%E5%9D%97%E7%9F%B3%E5%A4%B4%E7%9A%84%E9%87%8D%E9%87%8FII…

SQL触发器基本结构

1. 修改分隔符的符号 delimiter $$ $$或者//都可以 2.创建触发器的名称 create trigger 函数名称 3. 什么样的操作会触发&#xff0c;操作的那个表 after&#xff1a;....之后触发 befor&#xff1a;....之前触发 insert&#xff1a;插入被触发 update&#xff1a;修改被触发 …

Kibana 一步步可视化实战构建步骤全集

今早读者朋友圈提及&#xff1a;《一本书讲透Elasticsearch》适合入门级体系化阅读&#xff0c;书中的3个项目实战&#xff0c;很适合实操&#xff0c;但是在建立Kibana可视化的过程中&#xff0c;书中没有明确构建步骤&#xff0c;在实操中会有缺憾。 我解释一下&#xff1a; …

CPU与GPU的原理不同

CPU&#xff08;中央处理器&#xff09;和GPU&#xff08;图形处理器&#xff09;在设计原理上有很大的不同。CPU是通用的计算核心&#xff0c;擅长处理复杂的控制流和数据结构&#xff0c;而GPU则是为了并行处理大量相似的计算任务而设计的。二者是计算机系统中两种不同类型的…

AI实战 | 使用元器打造浪漫仪式小管家

浪漫仪式小管家 以前我们曾经打造过学习助手和待办助手,但这一次,我们决定创造一个与众不同的智能体,而浪漫将成为我们的主题。我们选择浪漫作为主题,是因为我们感到在之前的打造过程中缺乏了一些仪式感,无法给对方带来真正的惊喜。因此,这一次我们计划慢慢调试,将它发…

vim 显示行号

在 Vim 中&#xff0c;你可以通过几种不同的方式来显示行号。以下是两种常用的方法&#xff1a; 临时显示行号&#xff1a; 当你打开 Vim 并想要临时查看文件的行号时&#xff0c;你可以使用 :set number 命令。这个命令会在当前 Vim 会话中显示行号。如果你想要关闭行号显示&a…

Python xml.dom.minidom 读取XML元素

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 什么是 XML&#xff1f; XML&#xff08;可扩展标记语言&#xff09;是一种用于描述数据结构和交换数据的标记语言。它被广泛用于 Web 应用程序中&#xff0c;用于存储和传输数据。XML 具有自描述性&#xff0c;因此…