[improvement] Tabbar: add iPhone X layout feature for fixed tabbar (#3149)

packages/tabbar/en-US.md

@@ -69,6 +69,7 @@ export default {
 |------|------|------|------|
 | v-model | Index of current tab | `Number` | - |
 | fixed | Whether to fixed bottom | `Boolean` | `true` |
+| safe-area-inset-bottom | Whether to iPhone X bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` | 1.6.15 |
 | z-index | Z-index | `Number` | `1` |
 | active-color | Color of active tab item | `String` | `#1989fa` |
 

packages/tabbar/index.js

@@ -16,6 +16,10 @@ export default sfc({
       type: Boolean,
       default: true
     },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: false
+    },
     zIndex: {
       type: Number,
       default: 1
@@ -51,7 +55,13 @@ export default sfc({
     return (
       <div
         style={{ zIndex: this.zIndex }}
-        class={['van-hairline--top-bottom', bem({ fixed: this.fixed })]}
+        class={[
+          'van-hairline--top-bottom',
+          bem({
+            fixed: this.fixed,
+            'safe-area-inset-bottom': this.safeAreaInsetBottom
+          })
+        ]}
       >
         {this.slots()}
       </div>

packages/tabbar/index.less

@@ -11,4 +11,10 @@
     bottom: 0;
     position: fixed;
   }
+
+  &--safe-area-inset-bottom {
+    padding-bottom: 0;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }

packages/tabbar/zh-CN.md

@@ -84,6 +84,7 @@ export default {
 |------|------|------|------|------|
 | v-model | 当前选中标签的索引 | `Number` | - | - |
 | fixed | 是否固定在底部 | `Boolean` | `true` | - |
+| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，同时需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
 | z-index | 元素 z-index | `Number` | `1` | 1.1.9 |
 | active-color | 选中标签的颜色 | `String` | `#1989fa` | 1.5.1 |