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

时间:2024-04-15 16:38:23

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机型设置了此属性也无影响