当前位置: 首页 > news >正文

uni-app 微信小程序自定义导航栏

一、效果图

在这里插入图片描述

二、导航栏的组成

上面的导航栏主要由状态栏(就是手机电量显示栏)和小程序的导航栏组成,android手机一般为48px,ios手机一般为44px

三、开发步骤

1、设置navigationStyle:custom

{"path": "pages/views/home/detail","style": {"navigationStyle": "custom" ,// 隐藏系统导航栏"navigationBarTitleText": "车况"}},

2、页面导航栏div

<!-- 手机状态栏高度 -->
<view :style="'height:'+statusBarHeight+'px'" class="wper100"></view>
<!-- 微信导航栏高度-->
<view :style="'height:'+navTitleHeight+'px'" class="wper100">

3、获取statusBarHeight高度

let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

4、获取navTitleHeight的高度

uni.getSystemInfo({success: function(res) {console.log(res.system); // 输出操作系统名称,如 iOS 14.5.1 或 Android 10.0.0// 判断手机是 iOS 还是 Androidif (res.system.indexOf('iOS') !== -1) {console.log('手机是 iOS');that.$store.commit("setNavTitleHeight",44);// 在这里执行 iOS 相关的逻辑} else if (res.system.indexOf('Android') !== -1) {console.log('手机是 Android');// 在这里执行 Android 相关的逻辑that.$store.commit("setNavTitleHeight",48);} else {console.log('无法确定手机系统');that.$store.commit("setNavTitleHeight",48);}}});

相关文章:

uni-app 微信小程序自定义导航栏

一、效果图 二、导航栏的组成 上面的导航栏主要由状态栏&#xff08;就是手机电量显示栏&#xff09;和小程序的导航栏组成&#xff0c;android手机一般为48px&#xff0c;ios手机一般为44px 三、开发步骤 1、设置navigationStyle:custom {"path": "pages/v…...

电缆故障检测仪技术参数

一、电缆故障测试仪的技术参数 1.采样方法&#xff1a;低压脉冲法、冲击闪络法、速度测量法 2.电缆长度&#xff1a;50m、300m、1km、2km、5km、10km、30km、60km 3.波速设置&#xff1a;交联乙烯、聚氯乙烯、油浸纸、不滴油和未知类型自设定 4.冲击高压&#xff1a;35kV及以下…...

固定资产管理软件

固定资产全生命周期管理软件采用先进的RFID技术&#xff0c;从采购、入库、借用、总结、清理到损坏等方面准确统计资产&#xff0c;突破过去手工统计的复杂性&#xff0c;节省资产资源&#xff0c;减少调查时间&#xff0c;确保资产管理工作的准确性和快速性。 固定资产管理软…...

云安全攻防(四)之 云原生技术

云原生技术 容器技术 容器与虚拟化 虚拟化&#xff08;Virtualization&#xff09;和容器&#xff08;Container&#xff09;都是系统虚拟化的实现技术&#xff0c;可实现系统资源的”一虚多“共享。容器技术可以理解成一种”轻量的虚拟化“方式&#xff0c;此处的”轻量“主…...

线上通过Nginx部署前端工程,并且配置SSL

介绍、为了更好的帮助大家学习&#xff0c;减少歧义,IP地址我就不隐藏了&#xff0c;公司也是我自己的公司。你们就别来攻击了。 下面给出步骤: 一、前期准备工作 通过在目标服务器上安装宝塔面板、安装redis、mysql、nginx、jdk环境等 1、 2、前端工程通过npm run build 打…...

直播预告 | 开源运维工具使用现状以及可持续产品的思考

运维平台自上世纪90年代开始进入中国市场&#xff0c;曾形成以传统四大外企&#xff1a;IBM、BMC、CA、HP为代表的头部厂商&#xff0c;还有一众从网管起家的国内厂商。2010年前后&#xff0c;出现了以Zabbix、Nagios、Cacti为代表的开源工具&#xff0c;后来又陆续出现了Prome…...

GPT带我学-设计模式-工厂模式

1 你好&#xff0c;请问你知道设计模式的工厂模式吗 当然知道&#xff0c;工厂模式是一种创建型设计模式&#xff0c;它提供了一种创建对象的方式&#xff0c;而不需要暴露对象创建的逻辑细节。工厂模式通过使用工厂类来创建对象&#xff0c;从而将对象的实例化逻辑与客户端代…...

Docker 安装 Tomcat

目录 一、查看 tomcat 版本 二、拉取 Tomcat Docker 镜像 三、创建 Tomcat 容器 四、访问 Tomcat 五、停止和启动容器 一、查看 tomcat 版本 访问 tomcat 镜像库地址&#xff1a;https://hub.docker.com/_/tomcat&#xff0c;可以通过 Tags 查看其他版本的 tomcat; 二、拉…...

seata注册到nacos(docker)

1、安装&#xff1a;docker run --name seata-server2 -p 8091:8091 -p 7091:7091 seataio/seata-server:1.5.1 复制seata-server2到服务器&#xff0c;然后过河拆桥 2、创建挂载目录 mkdir -p /ssy/seata_docker 3、将容器 resources文件挂载到宿主机 docker cp seata-server2…...

ffmpeg综合应用示例(五)——多路视频合并(Linux版本)

本文的目的为方便Linux下编译运行多路视频合成Demo 原文&#xff1a;ffmpeg综合应用示例&#xff08;五&#xff09;——多路视频合并 Ubuntu 20.04 ffmpeg version ffmpeg-4.4-x86_64 编译 export LD_LIBRARY_PATH$LD_LIBRARY_PATH:/home/workspace/dengzr/linux-x64/lib…...

Node.js-http模块服务端请求与响应操作,请求报文与响应报文

简单案例创建HTTP服务端&#xff1a; // 导入 http 模块 const http require("http"); // 创建服务对象 const server http.createServer((request, response) > {// 设置编码格式&#xff0c;解决中文乱码问题response.setHeader("content-type", &…...

除了PS,还有那些软件可以打开PSD文件

设计师在交接文件时&#xff0c;会看到各种格式的扩展文件&#xff0c;不同的格式需要不同的软件来运行。大多数人都听说过流行的文件格式PSD&#xff0c;因为它是最常用的图片格式之一&#xff0c;还有JPG、PNG等。然而&#xff0c;与JPG和PNG不同的是&#xff0c;PSD格式文件…...

uniapp h5支付宝支付后端返回Form表单,前端如何处理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1.调取接口拿到后端返回的form表单 前言 uniapp h5 支付宝支付&#xff0c;后端返回一串form表单&#xff0c;前端如何拿到支付串并且调用支付 1.调取接口拿到…...

【华秋干货铺】PCB布线技巧升级:高速信号篇

如下表所示&#xff0c;接口信号能工作在8Gbps及以上速率&#xff0c;由于速率很高&#xff0c;PCB布线设计要求会更严格&#xff0c;在前几篇关于PCB布线内容的基础上&#xff0c;还需要根据本篇内容的要求来进行PCB布线设计。 高速信号布线时尽量少打孔换层&#xff0c;换层优…...

c#:ObservableCollection<T>的用法

1.说明&#xff1a; ObservableCollection&#xff1a;表示一个动态数据收集&#xff0c;该集合在添加或删除项或刷新整个列表时提供通知。 2.使用&#xff1a; 首先声明一个类 public ObservableCollection ProItems;//具体情况具体写对应的信息 表格DataGrid案例&#xff…...

Linux 端口号占用如何处理(使用命令处理)

查看被占用端口号 sudo netstat -tlnp 端口号 示例&#xff1a; sudo netstat -tlnp 3380杀死进程 sudo kill 进程Id sudo kill 11032...

ubuntu git操作记录设置ssh key

用到的命令&#xff1a; 安装git sudo apt-get install git配置git用户和邮箱 git config --global user.name “用户名” git config --global user.email “邮箱地址”安装ssh sudo apt-get install ssh然后查看安装状态&#xff1a; ps -e | grep sshd4. 查看有无ssh k…...

SystemVerilog数组参数传递及引用方法总结

一、将常数数组传递给task/function 如下面的程序&#xff0c;将一个常数数组传递给function module my_array_test();function array_test(int array[4]);foreach(array[i]) begin$display("array[%0d] %0d", i, array[i]);endendfunctioninitial beginarray_tes…...

Shell脚本学习-While循环1

当型循环和直到型循环&#xff1a; 循环语句常用于重复执行一条指令或一组指令&#xff0c;直到条件不满足时停止。 在企业实际应用中&#xff0c;常用于守护进程或者持续运行的程序。 while语法结构&#xff1a; while 条件 do指令... done while循环语句对后面的条件表达…...

docker for Windows, WSL2 ,Hyper-v的关系

Hyper-v Hyper-V是由微软开发的一种虚拟化技术和虚拟机管理器。它允许在Windows操作系统上创建和运行多个虚拟机实例&#xff0c;每个虚拟机可以运行独立的操作系统和应用程序。属于硬件虚拟化。 WSL2 WSL2在技术上与WSL有很大的不同。在WSL2中&#xff0c;Windows 10引入了…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》

&#x1f9e0; LangChain 中 TextSplitter 的使用详解&#xff1a;从基础到进阶&#xff08;附代码&#xff09; 一、前言 在处理大规模文本数据时&#xff0c;特别是在构建知识库或进行大模型训练与推理时&#xff0c;文本切分&#xff08;Text Splitting&#xff09; 是一个…...