You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.7 KiB
67 lines
1.7 KiB
<template> |
|
<view |
|
class="uv-safe-bottom" |
|
:style="[style]" |
|
:class="[!isNvue && 'uv-safe-area-inset-bottom']" |
|
> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js' |
|
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js' |
|
/** |
|
* SafeBottom 底部安全区 |
|
* @description 这个适配,主要是针对IPhone X等一些底部带指示条的机型,指示条的操作区域与页面底部存在重合,容易导致用户误操作,因此我们需要针对这些机型进行底部安全区适配。 |
|
* @tutorial https://www.uvui.cn/components/safeAreaInset.html |
|
* @property {type} prop_name |
|
* @property {Object} customStyle 定义需要用到的外部样式 |
|
* |
|
* @event {Function()} |
|
* @example <uv-status-bar></uv-status-bar> |
|
*/ |
|
export default { |
|
name: "uv-safe-bottom", |
|
mixins: [mpMixin, mixin], |
|
data() { |
|
return { |
|
safeAreaBottomHeight: 0, |
|
isNvue: false, |
|
}; |
|
}, |
|
computed: { |
|
style() { |
|
const style = {}; |
|
// #ifdef APP-NVUE || MP-TOUTIAO |
|
// nvue下,高度使用js计算填充 |
|
style.height = this.$uv.addUnit(this.$uv.sys()?.safeAreaInsets?.bottom, 'px'); |
|
// #endif |
|
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle)); |
|
}, |
|
}, |
|
mounted() { |
|
// #ifdef APP-NVUE |
|
// 标识为是否nvue |
|
this.isNvue = true; |
|
// #endif |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.uv-safe-bottom { |
|
/* #ifndef APP-NVUE */ |
|
width: 100%; |
|
/* #endif */ |
|
} |
|
/* #ifndef APP-NVUE */ |
|
// 历遍生成4个方向的底部安全区 |
|
@each $d in top, right, bottom, left { |
|
.uv-safe-area-inset-#{$d} { |
|
padding-#{$d}: 0; |
|
padding-#{$d}: constant(safe-area-inset-#{$d}); |
|
padding-#{$d}: env(safe-area-inset-#{$d}); |
|
} |
|
} |
|
/* #endif */ |
|
</style>
|
|
|