小程序 iPhoneX 底部小黑条覆盖问题

因为我是自定义的tabbar底部标签，在模拟器上的时候没有发现什么问题。

在苹果X 苹果11上就发现了 底部tabbar被苹果手机上的小黑条遮挡住了，并且点击的时候很不方便。

使用小程序自带的tabbar是没有这个问题的。
小黑条位置:

1.首先在app.js定义全局变量

    wx.getSystemInfo({
      success: res => {
        let { model:modelmes} = res;
        let _this = this;
        let iphoneArr = new Set(['iPhone X', 'iPhone 11', 'iPhone 11 Pro Max']); //机型
        if(iphoneArr.has(modelmes)) _this.globalData.isIphoneX = true; 
      }
    })

2. 在使用到页面相对应的js中添加判断

     const app = getApp();//先引入
     onLoad: function (options) {
        this.setData({
            isIphoneX:app.globalData.isIphoneX
         })  
     }

3.在使用的页面相对应的wxml中添加判断就可以了 小黑条的距离大概是68rpx

我这边设置的是padding-bottom 根据自己的项目进行修改即可。

      <cover-view class="tabBar" style="{{isIphoneX?'padding-bottom:68rpx':'padding-bottom:0px'}}">
            //内容
      </cover-view>

注意：苹果手机设置间距margin值有可能不显示 建议使用padding