当前位置: 首页 > 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引入了…...

Vue-Super-Flow隐藏玩法:不画图,只填空!手把手教你打造可配置的流程图答题组件

Vue-Super-Flow隐藏玩法&#xff1a;不画图&#xff0c;只填空&#xff01;手把手教你打造可配置的流程图答题组件 在Vue生态中&#xff0c;流程图工具通常被用来构建复杂的可视化编辑界面。但你是否想过&#xff0c;这些工具还能用来做些什么&#xff1f;本文将带你探索一个全…...

终极指南:30分钟打造你的首个ESP32 AI智能硬件项目

终极指南&#xff1a;30分钟打造你的首个ESP32 AI智能硬件项目 【免费下载链接】xiaozhi-esp32 An MCP-based chatbot | 一个基于MCP的聊天机器人 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaozhi-esp32 还在为嵌入式AI开发的高门槛而烦恼吗&#xff1f;物联…...

大厂高薪抢手!文科生如何抓住AI时代机遇,实现职业逆袭?

大厂纷纷高薪招聘文科生&#xff0c;引发社会关注。文科生凭借沟通、叙事、逻辑等优势&#xff0c;在大模型理解人类价值观、企业品牌宣传等方面发挥作用。高校也调整专业设置&#xff0c;培养跨学科人才。文章建议文科生根据自身专业&#xff0c;向文案策划、品牌宣传、法务、…...

K8s中pod的创建与销毁

刚开始学习&#xff0c;整了一下流程图1.pod的创建2.pod的销毁有不对的地方&#xff0c;大家共同探讨...

【个人推荐】一些好用的录音转写工具

因为助教课备课的缘故&#xff0c;需要录制讲座的音频以整理知识点。一次讲座的音频内容很长&#xff0c;即使3x速快进播放依然很耗费时间&#xff0c;因此录音转写的需求浮现了出来。于是闲暇之余探索了下市面上的录音转写工具&#xff0c;浅浅记录下体验。 下面主要推荐三款…...

Qwen2.5-Coder-1.5B应用案例:自动生成Bash脚本处理日志文件

Qwen2.5-Coder-1.5B应用案例&#xff1a;自动生成Bash脚本处理日志文件 1. 日志处理场景与痛点分析 1.1 运维工程师的日常挑战 在服务器运维工作中&#xff0c;日志分析是最常见也最耗时的任务之一。想象一下这样的场景&#xff1a; 你需要检查10台服务器上50个不同的服务日…...

算法对齐还是实战突围?解构GEO优化中方法论与实践的权重博弈

在生成式人工智能&#xff08;AIGC&#xff09;重塑全球信息检索范式的当下&#xff0c;生成式引擎优化&#xff08;Generative Engine Optimization, GEO&#xff09;已从一种前沿概念演变为品牌流量增长的底层操作系统。随着大语言模型&#xff08;LLM&#xff09;与检索增强…...

League-Toolkit:3大核心价值的英雄联盟智能辅助工具

League-Toolkit&#xff1a;3大核心价值的英雄联盟智能辅助工具 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit 是一款基于英雄…...

Stable-Diffusion-v1-5-archive多风格生成效果:复古海报/科技感UI/手绘插画实拍

Stable Diffusion v1.5 Archive多风格生成效果&#xff1a;复古海报/科技感UI/手绘插画实拍 1. 模型介绍与核心能力 Stable Diffusion v1.5 Archive是经典SD1.5文生图模型的归档版本&#xff0c;作为AI图像生成领域的"常青树"&#xff0c;它依然保持着强大的通用图…...

农业遥感避坑指南:用大疆P4M多光谱数据生成NDVI,选智图还是Metashape?

农业遥感实战&#xff1a;大疆P4M多光谱数据NDVI生成工具选型指南 站在农田边缘&#xff0c;手持大疆精灵4多光谱版&#xff08;P4M&#xff09;遥控器的你&#xff0c;刚刚完成了一次作物长势监测飞行。无人机带回的宝贵数据&#xff0c;正等待转化为直观的NDVI图——这张&quo…...