zhangmeng
2024-04-19 e3ba120cb766a17e098e58d11c39ffc600a3070c
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>