小程序 苹果 X,XR等机型 小黑条适配

问题：小程序底部的自定义tabBar，是用的小程序官方custom-tab-bar  组件。xr等机型下，因为有小黑条，去预约区域会被遮挡住。在其他机型下是可以正常显示的。

xr机型下：
 

其他机型下：

 

 解决方法：使用微信官方API，getSystemInfo()中的safeArea对象进行适配

 safeArea参数详情：

 1.通过getSystemInfo方法获取到screenHeight和safeArea.bottom 参数，然后两数相减，即获取底部多出的高度。
 

 wx.getSystemInfo({
      success: res => {
        let bottom=res.safeArea.bottom;//获取bottom高度
        let screenHeight=res.screenHeight//获取屏幕高度
        this.globalData.tabBottomHeight=screenHeight-bottom//获取多出的小黑条高度
        console.log(res)
      },
      fail(err) {
        console.log(err);
      }
 })

 2、将去预约部分的底部边离加上tabBottomHeight，即可完美解决bug；
 

    //60 为tabBar 高度，加上底部边距  
    <view class="add-item" style="bottom:{{barBottomHeight+60}}px">
              <view>￥415.00</view>
          <view>去预约</view>
      </view>