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

写在前面

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

页面截图.png

图1 浏览器

图2 真机运行

分析过程

进一步分析，计算出图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的用法。。。结果查出来是状态栏原因。）