这篇文章将为大家详细讲解有关微信小程序中怎么利用tabBar遮挡内容，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
可以看出iPhoneX下面会多出一块空白也会增加tabBar的遮挡内容，可以通过wx.getSystemInfoSync()获取机型的各种信息。
其中screenHeight是屏幕高度，safeArea的bottom属性会自动计算安全区域也就是去除tabBar下面的空白区域后有用区域的纵坐标。
如此就可以简单计算出tabBar的高度：
const res = wx.getSystemInfoSync()
const { screenHeight, safeArea: { bottom } } = res
console.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遮挡内容就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
