uni-app获取设备底部安全区高度，解决自定义底部tabBar导航安全区高度问题

// app.vue
onLaunch: function () {
   const result = uni.getSystemInfoSync();
   this.globalData.safeareaHeight = result.screenHeight - result.safeArea.bottom;
}

// components/menu.vue
<template>
    <view>
      <view>
        <view>导航一</view>
        <view>导航二</view>
        <view>导航三</view>
        <view>导航四</view>
      </view>
      <view
        :style="{ paddingBottom: safeareaHeight + 'px' }"
        class="safearea"
      ></view>
    </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      safeareaHeight: 0,
    };
  },
  mounted() {
    if (app.globalData.safeareaHeight > 0) {
      this.safeareaHeight = app.globalData.safeareaHeight;
    }
  }
};
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容