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

一、效果图

二、导航栏的组成

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

三、开发步骤

1、设置navigationStyle:custom

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

2、页面导航栏div

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

3、获取statusBarHeight高度

bash 复制代码
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

4、获取navTitleHeight的高度

bash 复制代码
uni.getSystemInfo({
			  success: function(res) {
			    console.log(res.system); // 输出操作系统名称,如 iOS 14.5.1 或 Android 10.0.0
			    // 判断手机是 iOS 还是 Android
			    if (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);
			    }
			  }
			});
相关推荐
说私域3 小时前
基于开源链动 2+1 模式 AI 智能名片 S2B2C 商城小程序的社群团购品牌命名策略研究
人工智能·小程序·开源·零售
源码_V_saaskw7 小时前
场馆预定系统小程序PHP+uniapp
微信小程序·小程序·uni-app·php
七月shi人7 小时前
用claude3.7,不到1天写了一个工具小程序(11个工具6个游戏)
前端·小程序·ai编程
ml130185288747 小时前
开发一个小程序需要多久时间?小程序软件开发周期
java·小程序·开源软件·软件需求
小徐_23338 小时前
uni-app工程实战:基于vue-i18n和i18n-ally的国际化方案
前端·微信小程序·uni-app
欧达克8 小时前
AI 嘴替,社交平台反杠机器人:第 3 篇-页面优化&总结
微信小程序·程序员
说私域8 小时前
基于开源 AI 大模型 AI 智能名片 S2B2C 商城小程序的京城首家无人智慧书店创新模式研究
人工智能·小程序·开源·零售
zhangyifang_0098 小时前
文心快码制作微信小程序
微信小程序
前端小趴菜059 小时前
UniApp Vue 3 中的网络请求封装及用法
前端·vue.js·uni-app
依辰9 小时前
小程序Iconfont使用最佳实践指南
前端·javascript·微信小程序