uniapp开发小程序 小米手机真机bottom:0无效 底部间隙 设备安全区域处理办法

uniApp自定义导航 CSS设置 bottom:0竟然无效,而iphone和开发模拟器没有问题

css 复制代码
		height: 150rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom,0));

网上查了各种方法,包括设置bottom:-20啊以及

css 复制代码
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

使用wx.getSystemInfoSync() API 获取系统信息:通过调用wx.getSystemInfoSync()获取系统信息,你可以获取到屏幕的宽高、底部安全区域的高度等信息。根据这些信息,你可以动态地计算和调整元素的位置和大小。

css 复制代码
const systemInfo = wx.getSystemInfoSync();
const safeArea = systemInfo.screenHeight - systemInfo.safeArea.bottom;

都解决不了根本问题,而且这个问题不是出在我一个人身上,很多大厂的小程序也有这个问题。

不要怀疑了,则不是咱的问题,这是小米手机的系统设置问题

可以通过以下方法解决这个坑问题

方法一:

这样设置一下

这样问题就解决了

方法二

参考美团的做法,和UI设计师沟通,将TabBar导航的背景色设计的和下面的间隙颜色一致,使得融为一体不容易看出来异常

相关推荐
new出一个对象3 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
new出一个对象3 小时前
uniapp接入高德地图
uni-app
dccose5 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
上优10 小时前
uniapp 选择 省市区 省市 以及 回显
大数据·elasticsearch·uni-app
尘浮生11 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生15 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen17 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘21 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡1 天前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos