这篇文章将为大家详细讲解有关微信小程序中怎么利用tabBar遮挡内容，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
可以看出iPhoneX下面会多出一块空白也会增加tabBar的遮挡内容，可以通过wx.getSystemInfoSync()获取机型的各种信息。
其中screenHeight是屏幕高度，safeArea的bottom属性会自动计算安全区域也就是去除tabBar下面的空白区域后有用区域的纵坐标。
如此就可以简单计算出tabBar的高度：
const res = wx.getSystemInfoSync()const { screenHeight, safeArea: { bottom } } = resconsole.log('resHeight',res);if (screenHeight && bottom){ let safeBottom = screenHeight - bottom this.setData({ height: 48 + safeBottom })}其中48是我们们自定义tab栏的高度，这样可以自定义一个组件设置高度撑起底部，再有tabBar的页面的最后引入
但是在使用webview的时候webview会充满整个页面导致下方填补空白失效，此时可以通过URL的query把遮挡的高度传给webview页面再给页面设置padding-bottom
附：tabBar的主要属性：
tabBar中每个item的属性如下：
关于微信小程序中怎么利用tabBar遮挡内容就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
