| New file |
| | |
|---|
| | | <template> |
|---|
| | | <view |
|---|
| | | class="u-safe-bottom" |
|---|
| | | :style="[style]" |
|---|
| | | :class="[!isNvue && 'u-safe-area-inset-bottom']" |
|---|
| | | > |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import props from "./props.js"; |
|---|
| | | /** |
|---|
| | | * SafeBottom 底部安全区 |
|---|
| | | * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。 |
|---|
| | | * @tutorial https://www.uviewui.com/components/safeAreaInset.html |
|---|
| | | * @property {type} prop_name |
|---|
| | | * @property {Object} customStyle 定义需要用到的外部样式 |
|---|
| | | * |
|---|
| | | * @event {Function()} |
|---|
| | | * @example <u-status-bar></u-status-bar> |
|---|
| | | */ |
|---|
| | | export default { |
|---|
| | | name: "u-safe-bottom", |
|---|
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | safeAreaBottomHeight: 0, |
|---|
| | | isNvue: false, |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | style() { |
|---|
| | | const style = {}; |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // nvue下，高度使用js计算填充 |
|---|
| | | style.height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px'); |
|---|
| | | // #endif |
|---|
| | | return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle)); |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // #ifdef APP-NVUE |
|---|
| | | // 标识为是否nvue |
|---|
| | | this.isNvue = true; |
|---|
| | | // #endif |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .u-safe-bottom { |
|---|
| | | /* #ifndef APP-NVUE */ |
|---|
| | | width: 100%; |
|---|
| | | /* #endif */ |
|---|
| | | } |
|---|
| | | </style> |
|---|
