uniapp沉浸式状态栏高度不同手机状态栏高度问题『踩坑记录』

在page.json设置页面沉浸式状态栏时踩的坑，发现这个沉浸式直接到手机屏幕顶端，不理睬系统的状态栏( 时间那一栏系统状态栏 )

{"path": "pages/detail/detail","style": {"navigationStyle":"custom",   // 设置沉浸式，隐藏状态栏}
}

可以隐藏原生状态栏，设置页面为沉浸式状态栏( 页面直接置顶，包括与电量、时间、其他应用状态一栏覆盖在一起 )，造成内容被覆盖。
所以需要padding-top出一部分给系统状态栏，那可以用下面的方法获取系统状态栏高度

因为每部手机的状态栏高度是不一样的
可以先用

onLaunch() {let res = uni.getSystemInfoSync() // 获取系统信息console.log('statusBarHeight: ', res.statusBarHeight) // 手机状态栏高度
}

然后设置一个变量给padding-top即可

uniapp沉浸式状态栏高度不同手机状态栏高度问题『踩坑记录』相关推荐

uniapp 沉浸式状态栏
uniapp 沉浸式状态栏 1.page.json 中设置 :"navigationStyle":"custom" "globalStyle" ...
【STM32+机智云】机智云手机APP点灯实验踩坑记录
[STM32+机智云]机智云手机APP点灯实验踩坑记录一.实验背景因为项目开发需要用到云平台,所以开始学习机智云平台,听说机智云比较容易入门,还有手机APP.因此开始了踩坑之旅,一切的一切开始于一 ...
android8.1增大状态栏图标,转载▏手机状态栏看不懂的8个小图标，答案都在这里了！...
本帖最后由沈沈沈沈昂于 2018-6-25 22:32 编辑对于手机状态栏上的图标,相信大多数花粉们都非常熟悉,但也难免会出现一些大家不常见的功能符号.为了不再让大家在发现陌生图标时感到懵逼.今 ...
uni-app沉浸式透明导航栏
第一步:pages.json,配置以下代码: {"pages": [{"path": "pages/index/index","s ...
uniapp 开发踩坑记录
使用dcloud 的 uniapp开发了一个app,把遇到的问题总结一下: 1.uniapp 前端的布局代码与小程序高度相似(如果没有接触过建议多看看文档):js是用的vue 布局比较简单,比jq ...
uniapp unipush接入个推消息推送（各种踩坑记录）安卓+IOS+在线消息+离线消息
uniapp 消息推送功能实现上周公司要求做一个消息推送的功能,由于现有的电商APP是用uniapp做的,所以优先考虑uniapp自带的unipush消息推送. ios证书导出踩坑 ios推送证书导 ...
uniapp通过v-for动态绑定ref踩坑记录
##uniapp通过动态绑定子组件ref踩坑纪录, 入职公司4个月了刚开发完一个reac框架的后台管理的子模块后,在两周前又加入了uniapp架子开发同时兼容mpass端和微信小程序项目,最近有一个功 ...
uniapp开发聊天APP踩坑记录
最近工作重心转移到了uniapp上,有一说一,这个框架跨端确实牛逼,一套代码能一次编译到多端使用.但随之而来的兼容性问题也是层出不穷,同样的在面临APP底层的改动也显得力不从心.同时,uniapp的性 ...
【踩坑记录】uni-app工程转vue-cli 工程
接手了一个uniapp项目,旧代码只能hbuilder编辑器打包,无法上公司的流水线,抽空研究了一下怎么转成npm打包. 网上的教程看起来特别简单,无非就是找个壳子把旧代码包起来.但是转换的过程中,踩 ...

uniapp沉浸式状态栏高度不同手机状态栏高度问题『踩坑记录』

uniapp沉浸式状态栏高度不同手机状态栏高度问题『踩坑记录』相关推荐

最新文章

热门文章

uniapp沉浸式状态栏高度 不同手机状态栏高度问题 『 踩坑记录』

uniapp沉浸式状态栏高度 不同手机状态栏高度问题 『 踩坑记录』相关推荐

最新文章

热门文章

uniapp沉浸式状态栏高度不同手机状态栏高度问题『踩坑记录』

uniapp沉浸式状态栏高度不同手机状态栏高度问题『踩坑记录』相关推荐