小程序 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