uniapp开发小程序 小米手机真机bottom:0无效 底部间隙 设备安全区域处理办法
  UTaIm9txC2X9 2023年12月07日 26 0


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

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

height: 150rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom,0));

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

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

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

const systemInfo = wx.getSystemInfoSync();
const safeArea = systemInfo.screenHeight - systemInfo.safeArea.bottom;

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

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

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

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

方法一:

这样设置一下

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

这样问题就解决了

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

方法二

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

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

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月07日 0

暂无评论

推荐阅读
UTaIm9txC2X9