commit | author | age
|
e3ba12
|
1 |
<template> |
Z |
2 |
<view |
|
3 |
class="u-safe-bottom" |
|
4 |
:style="[style]" |
|
5 |
:class="[!isNvue && 'u-safe-area-inset-bottom']" |
|
6 |
> |
|
7 |
</view> |
|
8 |
</template> |
|
9 |
|
|
10 |
<script> |
|
11 |
import props from "./props.js"; |
|
12 |
/** |
|
13 |
* SafeBottom 底部安全区 |
|
14 |
* @description 这个适配,主要是针对IPhone X等一些底部带指示条的机型,指示条的操作区域与页面底部存在重合,容易导致用户误操作,因此我们需要针对这些机型进行底部安全区适配。 |
|
15 |
* @tutorial https://www.uviewui.com/components/safeAreaInset.html |
|
16 |
* @property {type} prop_name |
|
17 |
* @property {Object} customStyle 定义需要用到的外部样式 |
|
18 |
* |
|
19 |
* @event {Function()} |
|
20 |
* @example <u-status-bar></u-status-bar> |
|
21 |
*/ |
|
22 |
export default { |
|
23 |
name: "u-safe-bottom", |
|
24 |
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|
25 |
data() { |
|
26 |
return { |
|
27 |
safeAreaBottomHeight: 0, |
|
28 |
isNvue: false, |
|
29 |
}; |
|
30 |
}, |
|
31 |
computed: { |
|
32 |
style() { |
|
33 |
const style = {}; |
|
34 |
// #ifdef APP-NVUE |
|
35 |
// nvue下,高度使用js计算填充 |
|
36 |
style.height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px'); |
|
37 |
// #endif |
|
38 |
return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)); |
|
39 |
}, |
|
40 |
}, |
|
41 |
mounted() { |
|
42 |
// #ifdef APP-NVUE |
|
43 |
// 标识为是否nvue |
|
44 |
this.isNvue = true; |
|
45 |
// #endif |
|
46 |
}, |
|
47 |
}; |
|
48 |
</script> |
|
49 |
|
|
50 |
<style lang="scss" scoped> |
|
51 |
.u-safe-bottom { |
|
52 |
/* #ifndef APP-NVUE */ |
|
53 |
width: 100%; |
|
54 |
/* #endif */ |
|
55 |
} |
|
56 |
</style> |