首页 > 编程语言 >小程序头部高度获取

小程序头部高度获取

时间:2024-01-03 17:36:51浏览次数:25  
标签:pixelRatio1 const 程序 高度 globalData 获取 let 头部 systemInfo

小程序头部高度获取_导航栏

export function getNavigationBarHeight() {
  // 获取系统信息
  const systemInfo = getItem(GLOBAL_SYSTEM_INFO);
  //获取胶囊信息
  const menuBtnInfo = uni.getMenuButtonBoundingClientRect()
  
  //状态栏高度
  const statusBarHeight = systemInfo.statusBarHeight
  
   //胶囊高度
  const menuHeight = menuBtnInfo.height
  
   //胶囊与顶部的距离
  const menuTop = menuBtnInfo.top
  
  //导航栏高度= (胶囊顶部距离-状态栏高度) x 2 + 胶囊的高度
  const navigatorHeight = (menuTop - statusBarHeight) * 2 + menuHeight
  
  //总高度 = 状态栏的高度 + 导航栏高度
  return (statusBarHeight + navigatorHeight) * 2
}

onLaunch: function () {    
    var that = this;
    //获取设备信息
    let systemInfo = wx.getSystemInfoSync()
    that.globalData.systemInfo = systemInfo
    //1rpx 像素值 
    let pixelRatio1 = 750 / systemInfo.windowWidth;
    that.globalData.pixelRatio1 = pixelRatio1
    //胶囊信息
    let menu = wx.getMenuButtonBoundingClientRect()
    that.globalData.menuInfo = menu
    //状态栏高度
    let statusHeight = systemInfo.statusBarHeight
    that.globalData.statusHeight = statusHeight * pixelRatio1
    //导航栏高度
    let naviHeight = (menu.top - statusHeight) * 2 + menu.height
    that.globalData.naviHeight = naviHeight * pixelRatio1
    //顶部高度 = 状态栏高度 + 导航栏高度
    that.globalData.topHeight = (statusHeight + naviHeight) * pixelRatio1
    //屏幕高度
    let screenHeight = systemInfo.screenHeight
    that.globalData.screenHeight = screenHeight * pixelRatio1
    //底部高度 = 屏幕高度 - 安全区域bottom
    let bottom = systemInfo.safeArea.bottom
    that.globalData.bottomHeight = (screenHeight - bottom) * pixelRatio1
    }

标签:pixelRatio1,const,程序,高度,globalData,获取,let,头部,systemInfo
From: https://blog.51cto.com/u_16492874/9087095

相关文章

  • 小程序更新版本(加载首页onLoad的时候调用)
    /***获取新版本信息*/exportfunctiongetNewVersionUpdateMessage(){console.log('版本更新!')constupdateManager=uni.getUpdateManager();updateManager.onCheckForUpdate(function(res){//请求完新版本信息的回调console.log(res.hasUpdate);......
  • Highchart获取csv数据
    需求:获取html中的csv数据在单独的y轴上应该有2个系列可见。折线图应显示温度图表。使用SVGRenderer添加一个按钮,该按钮将负责在华氏度和摄氏度之间更改温度单位。分析:题目要求获取csv数据,需要两个Y轴,折线图显示温度,在左上角画一个按钮实现温度切换实现:源码:效果图......
  • 在微信小程序中如何改变默认打开的页面
    各位伙伴们新年好,我是咕噜铁蛋!我们经常需要在微信小程序中定制化我们的应用程序,包括改变默认打开的页面。今天铁蛋也收集了些内容,详细介绍在微信小程序中如何改变默认打开的页面,帮助你实现更好的用户体验和个性化的应用程序。一.我们先了解微信小程序的默认打开页面在微信小程序中,默......
  • 租赁小程序开发|人车网租赁系统功能和优势
    如今,租赁行业正在迅速发展,越来越多的商家和用户寻求更便捷、高效的租赁体验。租赁小程序作为一种科技创新的产物,为租赁行业带来了巨大的变革。本文将介绍租赁小程序的功能与特色,旨在让商家和用户更了解这一工具,为他们带来更多的便利。  租赁小程序: 1、智能租赁管理:租赁小程序通......
  • win10玩游戏-提示缺少ActivationClient.dll文件无法启动程序的解决方
    相信不少同学都遇到过,在启动游戏的时候,系统弹出缺少“ActivationClient.dll”文件无法启动的情况。不熟悉的朋友,常常以为是软件或游戏安装出现了异常,造成的。其实并不是游戏安装有异常,问题出在当前的操作系统中没有“ActivationClient.dll”文件,或者改文件丢失了,只要我们找到这个文......
  • 15.明明是x86的sos为什么会报不是有效的Win32应用程序
    最近在分析一个dump的时候,遇到了%1不是有效的Win32应用程序。这个错误,输出如下:*************Pathvalidationsummary**************ResponseTime(ms)LocationDeferredSRV*C:\mysymbols*http://msdl......
  • 揭开大龄程序员的职场密码:永葆青春的秘诀!
    前言说说失业感受吧,今年34,工作7年(这盛世如你所愿),感觉要告别这个行业了。失业一个月面试了好多,基本都是一轮游,有些感觉回答的挺好的,最后也没啥机会了,后面我都会问面试官招聘HC有多少,基本上是一两个,所以别看岗位不少,招的人真不多!好多公司连面试机会都不给了,像阿里、京东、百度、腾讯......
  • 获取 app 内部的资源图片文件
    一、获取Assets.car:https://www.jianshu.com/p/7710c68f38cf首先去Mac上的AppStore下载AppleConfigurator2。然后把iphone连接上Mac,点击AppleConfigurator2菜单中->账户->登陆(用连接设备的AppleID)  打开登录.png  登录AppleID.png备份iPhone的内......
  • PDF文档转换工具箱流量主小程序开发
    PDF转换小助手,不仅是文件格式转换的利器,更是一位得力的助手。它精通PDF与各类文档间的自由转换,如Word、Excel、PowerPoint等。转换选项丰富多样,满足您对文件保护、页面设置、图像品质等细致要求。处理大量文件?没问题!它支持批量转换,轻松应对。除了转换,PDF转换小助手还具备强大的编辑......
  • 解决爬虫无法获取动态网页内容的方法
    随着互联网的发展,许多网站采用了动态网页技术,通过JavaScript等前端技术动态加载内容。对于爬虫来说,获取动态网页的内容可能会变得更加复杂。在这篇文章中,我们将讨论爬虫无法获取动态网页内容的原因,并介绍一些解决方法,以确保我们能够成功获取所需的数据。为什么爬虫无法获取动态网页......