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.rhkb.cn/news/353217.html

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

相关文章

玩了两年黑苹果+两年MBP,macOS究竟好在哪?

注&#xff1a;本文仅为个人观点&#xff0c;仅供参考。 前言 今天比较无聊&#xff0c;小白突然盘点了一下自己使用macOS系统的点点滴滴&#xff0c;这也算是一个闲聊帖子吧。 首先&#xff0c;本帖子无任何广告行为&#xff0c;纯属唠嗑文。 声明一下&#xff0c;以防有小…

如何优雅地限制textarea的输入字数?

大家好&#xff0c;我是瑶山&#xff0c;今天聊聊textarea textarea 有基础的同学都知道<textarea>是HTML中的一个标签&#xff0c;用于定义多行的文本输入控件。它允许用户在表单中输入多行文本&#xff0c;相较于单行输入框可以输入更多的内容。 但是&#xff0c;如果…

计算机网络(2) 网络层:IP服务模型

一.Internet Protocol在TCP/IP四层模型中的作用 第三层网络层负责数据包从哪里来到哪里去的问题。传输层的数据段提交给网络层后&#xff0c;网络层负责添加IP段&#xff0c;包含数据包源地址与目的地址。将添加IP段的数据包交由数据链路层添加链路头形成最终在各节点传输中所需…

使用Minikube部署Kubernetes环境

使用Minikube部署Kubernetes环境 1. Minikube简介 Minikube是一个轻量级的Kubernetes实现&#xff0c;它在本地运行一个Kubernetes集群&#xff0c;可以是单节点或者集群环境&#xff0c;主要用于开发和测试。Minikube支持Kubernetes的所有主要功能&#xff0c;包括Dashboard…

淘宝镜像地址失效

1. 使用nvm安装node时候报错 报错内容 Get "https://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt": tls: failed to verify certificate: x509: certificate has expired or is not yet valid:报错原因 淘宝镜像地址的证书过期了 解决 找到nvm安装的根目…

scratch3编程02-使用克隆来编写小游戏

目录 1&#xff0c;游戏效果 2&#xff0c;游戏代码块 1&#xff09;玩家 2&#xff09;障碍物 ​ 3&#xff09;箭头 ​ 4&#xff09;关卡图片 3&#xff0c;scratch文件 1&#xff0c;游戏效果 使用克隆 在这个游戏中&#xff1a; 程序开始&#xff1a;只要点击“…

统计学一(术语,正态)

目录 一&#xff0c;常用术语 二&#xff0c;正态分布&#xff08;Normal Distribution&#xff09; 三&#xff0c;中心极限定理(Central Limit Theorem) 一&#xff0c;常用术语 population(族群)&#xff1a;要统计的总的 populationSize(族群数量)&#xff1a;要统计的总…

Ardupilot开源代码之ExpressLRS性能实测方法

Ardupilot开源代码之ExpressLRS性能实测方法 1. 源由2. 测试效果3. 测试配置4. 总结5. 参考资料6. 补充 1. 源由 之前一直在讨论ExpressLRS性能的问题&#xff0c;有理论、模拟、实测。 始终缺乏完整的同一次测试的测试数据集&#xff0c;本章节将介绍如何在Ardupilot上进行获…

QT day02

思维导图 UI界面设计 设置登录界面&#xff0c;输入账号、密码&#xff0c;登录/取消 按钮 使用手动连接&#xff0c;将登录框中的取消按钮使用第二中连接方式&#xff0c;右击转到槽&#xff0c;在该槽函数中&#xff0c;调用关闭函数 将登录按钮使用qt4版本的连接到自定义…

zerotier自建moon方法

简介 使用zerotier已经有一段时间了&#xff0c;现在偶尔会出现服务器连接不上的情况。我就想自己建个moon来试试。记录一下过程&#xff0c;用作备忘录。 准备工作 准备一个有公网IP的云主机。我用的是“三丰云”&#xff0c;速度很快同时提供"免费虚拟主机"和“免费…

商讯杂志商讯杂志社商讯编辑部2024年第10期目录

案例分享 基于胜任素质的干部选拔和梯队建设体系探讨——以A区卫生健康系统为例 康文雁; 1-4 “家庭五险一金”对居民商业保险购买存在挤出效应——基于江苏省徐州、淮安、泰州三市的实证研究 李炳毅; 5-8 人口老龄化背景下促进徐州市经济高质量发展的探究 李艳秋;…

java:spring actuator扩展原有info endpoint的功能

# 项目代码资源&#xff1a; 可能还在审核中&#xff0c;请等待。。。 https://download.csdn.net/download/chenhz2284/89437506 # 项目代码 【pom.xml】 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId&…

【热门开源项目推荐】满足不同程序员的需求与关注点

目录 前言一、热门开源项目介绍二、使用开源热门项目的优势&#xff08;一&#xff09;经济方面&#xff08;二&#xff09;技术方面&#xff08;三&#xff09;社区支持及协作方面 三、程序员选择项目模型建议&#xff08;一&#xff09;关键步骤&#xff08;二&#xff09;示…

后端开发中缓存的作用以及基于Spring框架演示实现缓存

缓存的作用及演示 现在我们使用的程序都是通过去数据库里拿数据然后展示的 长期对数据库进行数据访问 这样数据库的压力会越来越大 数据库扛不住了 创建了一个新的区域 程序访问去缓存 缓存区数据库 缓存里放数据 有效降低数据访问的压力 我们首先进行一个演示 为了演示…

【Spine学习12】之 事件帧

1、新建事件帧&#xff1a; 2、选择第8s的攻击帧&#xff0c;点击第一步新建的attack事件帧前面的钥匙 这样每次动作到8s的时候会自动跳出事件帧提示 这个文字实际动画不会显示 事件是动画过程中所发生情况的触发器。 给程序员识别的

苍穹外卖环境搭建

一、前端环境搭建 ①整体结构 ②前端工程基于nginx运行 启动nginx:双击 nginx.exe 即可启动 nginx 服务&#xff0c;访问端口号为 80 进入浏览器地址输入locallhost回车 二、后端环境搭建 后端初始工程基于maven进行项目构建&#xff0c;并且进行分模块开发 (1) idea打开初始…

【靶场搭建】-01- 在kali上搭建DVWA靶机

1.DVWA靶机 DVWA&#xff08;Damn Vulnerable Web Application&#xff09;是使用PHPMysql编写的web安全测试框架&#xff0c;主要用于安全人员在一个合法的环境中测试技能和工具。 2.下载DVWA 从GitHub上将DVWA的源码clone到kali上 git clone https://github.com/digininj…

力扣每日一题 6/18 字符串/模拟

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 2288.价格减免 【中等】 题目&#xff1a; 句子 是由若干个单词组成的字符…

如何应对IT行业内卷严重?生存策略大揭秘!

这几天&#xff0c;身边又有个IT项目团队又开始间歇性停工了&#xff01;当下IT行业内卷相当严重&#xff0c;大部分的技术团队面临着前所未有的挑战。 我们要正视目前行业中的显示&#xff0c;内卷趋势短期内不会消失&#xff0c;而且很可能随着大型公司人员毕业而更加严重。 …

【Redis】java客户端(SpringData和jedis)

https://www.oz6.cn/articles/58 https://www.bilibili.com/video/BV1cr4y1671t/?p16 redis官网客户端介绍&#xff1a;https://redis.io/docs/latest/develop/connect/clients/ jedis maven引入依赖 <dependencies><!--引入Jedis依赖--><dependency><…