微信小程序如何轻松解决tabBar遮挡底部内容问题？

本文共计296个文字，预计阅读时间需要2分钟。

微信小程序配置tabBar后，会避免重要内容被遮挡。不同机型如iPhoneX底部可能有一块空白区域，如下方图片所示，比普通页面底部空白区域更大。因此，需要获取被遮挡的高度，以便iPhoneX底部也能显示页面。

微信小程序配置tabBar之后会遮挡重要内容，而且不同机型如iPhoneX下面可能有一块空白如下图，比较坑的是页面最底部空白也会显示页面，因此需要获取被遮挡的高度

可以看出iPhoneX下面会多出一块空白也会增加tabBar的遮挡内容，可以通过wx.getSystemInfoSync()获取机型的各种信息。

其中screenHeight是屏幕高度，safeArea的bottom属性会自动计算安全区域也就是去除tabBar下面的空白区域后有用区域的纵坐标。