30 lines
710 B
Vue
30 lines
710 B
Vue
<template>
|
||
<view class="safe-area-bottom" :style="{ height: bottomHeight + 'px' }"></view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
|
||
const bottomHeight = ref(0)
|
||
|
||
onMounted(() => {
|
||
// #ifdef APP-PLUS || MP-WEIXIN
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
// 获取底部安全区域高度
|
||
bottomHeight.value = systemInfo.safeAreaInsets?.bottom || 0
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
// iOS环境下的 H5，需要适配底部安全区域
|
||
if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
|
||
bottomHeight.value = 34 // iPhone X 及以上机型的底部安全区域高度
|
||
}
|
||
// #endif
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.safe-area-bottom {
|
||
width: 100%;
|
||
}
|
||
</style> |