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,一经查实,立即删除!

相关文章

课程设计——基于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…

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

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

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

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

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…

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; …

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

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

Python xml.dom.minidom 读取XML元素

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

文生视频开源产品的一些调研(一)

笔者尝试AI视频生成的几个特点&#xff1a; 玄学prompt&#xff0c;每个视频的prompt可能也需要微调很多次&#xff0c;需要找到使用模型的最佳prompt词组合&#xff0c;不恰当的比喻&#xff0c;骑自行车&#xff0c;座位高度等都是人与车彼此熟悉玄学生成&#xff0c;因为需…

第二证券:英伟达“利空”?!黄仁勋逢高又卖超2亿

时隔9个月&#xff0c;黄仁勋再次套现英伟达&#xff0c;股价小幅下跌。 当地时间6月17日周一&#xff0c;美股三大股指全线收涨。到收盘&#xff0c;道指涨0.49%&#xff0c;纳指涨0.95%&#xff0c;标普500指数涨0.77%。 英伟达CEO黄仁勋时隔9个月再度出售英伟达股票。最新…

基于spring的个人理财系统

需求概述 建设目标 个人理财项目的项目建设目标如下&#xff1a;完成用户注册、登录、用户唯一性验证、记账管理、预算管理、个人信息、修改密码等功能&#xff0c;实现完整的理财流程。 运行环境 1&#xff0e;系统硬件环境 &#xff08;1&#xff09;服务器端 名称 配置…

STM32学习笔记(六)--引脚重映射详解

STM32F103C8T6引脚定义&#xff1a; 在STM32微控制器中&#xff0c;外设引脚的复用功能&#xff08;Alternate Function&#xff0c;AF&#xff09;有时会出现冲突&#xff0c;例如当USART2_CTS和TIM2_CH1同时需要使用相同的引脚时。此时&#xff0c;可以通过引脚重映射功能&am…

入门三.HTB--Dancing(6.18)

大佬 https://www.cnblogs.com/Hekeats-L/p/16535920.html 任务1 SMB 即Server Message Block&#xff08;服务器消息块&#xff09;&#xff0c;是一种文件共享协议。当文件原件在你的A电脑上&#xff0c;而你想在局域网下用你的手机、iPad或是另一台电脑来访问A电脑上的该文…

【AI工具】探索创意与效率:xs.tools 网站介绍

在这个数字化时代,工具的创新和效率对我们的日常工作和生活至关重要。"xs.tools" 网站是一个汇集了众多有趣且实用的小工具的平台,它不仅帮助用户快速找到所需的工具,还能激发灵感,提升创造力。 一、网站概览 "xs.tools" 提供了一个简洁而直观的界面…

Centos7如何扩容未做lvm的GPT硬盘

背景&#xff1a;一台根分区为2.5T(已转换GPT格式)的虚拟机使用率达到97%&#xff0c;需要扩容&#xff0c;但是又没做lvm 通过平台新增容量1.5T&#xff0c;如下可看到 安装growpart准备扩容&#xff1a; yum install cloud-utils-growpart -y 执行命令growpart报错&#xff…

ChatGPT付费创作系统V3.0.2独立版 WEB+H5+小程序端 (H5端界面美化+Pika视频作品广场+SunoAI 文生歌)系统部署教程

播播资源GPT付费体验系统最新版系统是一款基于ThinkPHP框架开发的AI问答小程序&#xff0c;是基于国外很火的ChatGPT进行开发的Ai智能问答小程序。当前全民热议ChatGPT&#xff0c;流量超级大&#xff0c;引流不要太简单&#xff01;一键下单即可拥有自己的GPT&#xff01;无限…

6.华为路由器与二层交换机连接单臂路由划分vlan实现互通

目的&#xff1a;华为路由器与二层交换机连接使用单臂路由使PC1 PC2不通vlan互通 AR1配置 [Huawei]int g0/0/0.10 [Huawei-GigabitEthernet0/0/0.10]dot1q termination vid 10 [Huawei-GigabitEthernet0/0/0.10]ip address 10.10.10.1 24 [Huawei-GigabitEthernet0/0/0.10]arp…