uni-app小程序iPhone X适配底部栏黑横线

app.vue中判断手机机型，设置需要留出的高度（如果不是iPhonex，则默认为空）

<script>
export default {
  methods: {
    getMobileInfo() {
      const mobileInfo = uni.getSystemInfoSync();
      let BottomBlackLineHeight = ""; //iphoneX底部一条黑线，有些页面要避开
      let iphoneXArr = ["iPhone X", "iPhone 11", "iPhone 11 Pro Max"];
      iphoneXArr.forEach(function(item) {
        if (mobileInfo.model.search(item) !== -1) {
          BottomBlackLineHeight = "30rpx";
        }
      });
    }
  },
  onLaunch: function() {
    // 获取手机信息
    this.getMobileInfo();
  }
};
</script>

在需要避开底部横线的地方，设置：style="{paddingBottom：BottomBlackLineHeight }"

因为BottomBlackLineHeight默认为空，那么非iPhoneX机型设置了此属性也无影响