首页 > 其他分享 >uniapp 常用高度状态栏,导航栏,tab栏,底部安全高度

uniapp 常用高度状态栏,导航栏,tab栏,底部安全高度

时间:2024-09-26 19:52:55浏览次数:3  
标签:uniapp 状态栏 const posConfig systemInfo 高度 menuButtonInfo

实际效果

        // 入参 是否转换为rpx
        getPosConfig(toRpx = true) {
				const systemInfo = uni.getSystemInfoSync();
				// #ifdef MP
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				// #endif
				const posConfig = {
					statusBarH: systemInfo.statusBarHeight,//状态栏高度
					tabBarH: systemInfo.screenHeight - systemInfo.windowHeight,//底部tab高度
					safeBottomH: systemInfo.safeAreaInsets.bottom,//底部安全高度
					// #ifdef MP
					capsuleH: menuButtonInfo.height, //胶囊高度
					capsuleW: menuButtonInfo.width, //胶囊宽度
					capsuleGap: menuButtonInfo.top - systemInfo.statusBarHeight, // 胶囊到状态栏的间隔
					customBarH: menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2, //自定义导航栏高度
					customBarW: menuButtonInfo.left, // 自定义导航栏宽度
					// #endif
				}
				if (toRpx) {
					const ratio = 750 / systemInfo.windowWidth;
					for (let key in posConfig) {
						posConfig[key] *= ratio;
					}
				}
				return posConfig;
}

标签:uniapp,状态栏,const,posConfig,systemInfo,高度,menuButtonInfo
From: https://blog.csdn.net/CZDBGSY/article/details/142107463

相关文章

  • UniApp组件与微信小程序组件对照学习
    UniApp只是一个第三方的开发工具,借鉴各种平台的能力,UniApp的组件也借鉴了微信小程序的组件,我们学习时,可以进行对照学习,我们在用UniApp开发微信小程序时,UniApp也只是将代码转成了微信小程序的代码,还是需要了解微信小程序开发,才能开发出微信小程序的。下面我们来进行对应学习1......
  • uniapp 安卓原生隐私政策,首次进入APP弹窗配置
    1.找到并打开manifest.json文件,点击”App启动界面配置”,找到”Android启动界面样式”,然后勾选”使用原生隐私政策提示框” 2.勾选完“使用原生隐私政策提示框”后,manifest.json文件同级会出现androidPrivacy.json文件,点击此文件后出现配置页面:{"version":"1","pr......
  • EasyCVR智慧公园视频智能管理方案:赋能公园安全管理新高度
    随着城市化进程的加速,智慧城市建设已成为提升城市管理效率、增强居民生活质量的重要途径。智慧公园作为智慧城市的重要组成部分,其安全与管理水平直接影响着市民的休闲娱乐体验。EasyCVR智慧公园视频智能管理方案,正是基于这一背景应运而生,它集成了高清视频监控、智能分析、远程管理......
  • GBASE南大通用联合《中国信息化》,赋能政企数字化转型新高度
    9月21日,由《中国信息化》杂志社主办,GBASE南大通用协办的2024信创赋能政企数智化转型创新发展大会暨《中国信息化》杂志创刊二十周年活动在北京隆重举行。会上正式揭晓《中国信息化》创刊20周年系列荣誉,并组织权威解读、案例分析、圆桌对话、技术展示等系列活动,共同探讨信创建设与政......
  • 基于微信小程序的校园二手平台{UNIAPP+SSM+MySQL+Vue}
    目录一、前言二、技术介绍三、系统实现四、论文参考五、核心代码六、数据库文件 七、其他案例八、源码获取作者介绍:✌️大厂全栈码农|毕设实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。✌️作者博客:曾几何时......
  • uniapp - 详解安卓App打包后使用uni.chooseLocation地址列表一直加载转圈问题,Android
    前言网上的教程都无法解决问题,本文提供强力解决方案。在uni-app安卓App平台端开发中,详解uniApp打包成Android安卓后用chooseLocation打开地图选择位置空白卡住不动问题,选择地址列表什么也没有且一直处于加载状态(永远不会加载出来卡住了),另外点击搜索框后也无法搜索地点......
  • 鸿蒙应用开发——Scroll/List组件无法触发滑动,检查子组件的高度是否被固定/是否内嵌了
    鸿蒙应用开发——Scroll/List组件无法触发滑动一、检查子组件的高度是否被固定若Scroll/List组件的子组件的高度超出了Scroll/List组件高度则能够滚动,此时子组件的高度固定且不超过Scroll/List组件的高度的话,就无法滚动。这种情况直接取消子组件的固定高度即可,例如去掉height:'1......
  • 基于SpringBoot+Vue+uniapp微信小程序的小区租拼车管理信息系统的详细设计和实现
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我成功案例代码参考数据库参考源码获取前言......
  • 基于SpringBoot+Vue+uniapp微信小程序的电影院订票选座小程序的详细设计和实现
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我成功案例代码参考数据库参考源码获取前言......
  • jenkins 搭建 uniapp h5部署服务
    项目中需要适用jenkins搭建uniapph5部署服务,初次接触,踩了很多坑,记录下主要分为两步骤:1.创建uniapp打包环境由于创建打包环境的步骤有手动确定项目,所以不能通过jenkins自动创建,需要先到目录中手动配置环境2.搭建jenkins自动化部署步骤任务把jenkins工作目录配置为刚才的环......