| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <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> |
|---|
