判断苹果黑条_小程序 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 根据自己的项目进行修改即可。

//内容

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