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

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

实际效果

使用

//使用
let posConfig = this.getPosConfig(); // 传false返回值为 px大小
console.log(posConfig.safeBottomH)

 

        // 入参 是否转换为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;
}


http://www.kler.cn/a/328537.html

相关文章:

  • React解决保存less文件后会自动生成css文件的方法
  • k8s上部署redis高可用集群
  • Windows docker下载minio出现“Using default tag: latestError response from daemon”
  • IntelliJ IDEA 2024.3(Ultimate Edition)免费化教学
  • RSA算法原理
  • DHTMLX-gantt组件显示不同的颜色
  • C++ 游戏开发
  • Docker 安装 Citus 单节点集群:全面指南与详细操作
  • Linux 文件目录结构(详细)
  • 【PostgreSQL】入门篇——如何创建、删除和管理数据库及其用户,包括权限设置和角色管理
  • OSPF路由计算
  • 滑动窗口->dd爱框框
  • Elasticsearch学习笔记(3)
  • Service Mesh
  • Java | Leetcode Java题解之第450题删除二叉搜索树中的节点
  • Arduino UNO R3自学笔记7 之 Arduino使用PWM电机调速
  • 服务器数据恢复—存储映射到服务器上的卷无法挂载的数据恢复案例
  • DC00025【含论文】基于协同过滤推荐算法springboot视频推荐管理系统
  • 使用Yasboot安装YashanDB的疑惑和建议
  • 进阶数据库系列(十三):PostgreSQL 分区分表
  • SolidWorks机器转ROS2 URDF
  • Linux下send函数和recv函数
  • AWS Redshift把老用户权限赋予新用户
  • 201 Created
  • 如何在Windows、Mac和Linux系统上安装和更新Stable Diffusion WebUI
  • Spark SQL分析层优化