浅尝MUI-记一次沉浸式问题

写在前面

最近有一个页面需要使用MUI的可左右拖动的顶部选项卡框架,但是这个框架需要自己设定高度,因此使用的JS来动态计算,在计算过程中发现一个问题,使用浏览器测试时(真机,浏览器同苹果6测试),通过图1可以看出,计算出的框架高度应该是100px,但是在真机运行时,控制台打印出来的高度却是,120px,ps:(因为有底部导航栏51px,采用的原生方案,因此压缩了webview页面高度,所以看到的页面高度为616px。)


浅尝MUI-记一次沉浸式问题_第1张图片
页面截图.png

浅尝MUI-记一次沉浸式问题_第2张图片
图1 浏览器

图2 真机运行

分析过程

进一步分析,计算出图3部分的高度:

浅尝MUI-记一次沉浸式问题_第3张图片
图3 顶部元素

通过图4,图5,可看到打印出来的高度值:

图4 浏览器运行
图5 真机运行

通过上图可以看出,这部分的元素没有影响我们的高度获取,那么继续进一步排查,再往上走就只有header标签(图6),但是这部分高度我们是给的固定值44px,不管怎么说,打印出来试试:

图6 header部分

通过图7 图8可以发现,真机运行和浏览器运行居然不一样!

图7 浏览器运行
图8 真机运行

此时,恍然大悟!

结论

因为设置了沉浸式状态栏,所以通过获取状态栏高度,自动调整了header标签的高度(ps:给了一个paddingtop;padding在使用offsetHeight计算高度时,会计算进去)。因此我们多出来16px的高度,导致页面出现纵向滚动条。进一步猜测:设置了沉浸式后,状态栏就像是absolute属性一样,浮动在上方。因此,小伙伴们一定要注意这个问题!(ps:查了好久,一直以为是offsetTop属性不会获取padding的值,顺带跑去复习了一遍offset的用法。。。结果查出来是状态栏原因。)

你可能感兴趣的:(浅尝MUI-记一次沉浸式问题)