feat: adapt iPhoneX @rex-zsd (#989)

example/pages/goods-action/index.wxml

@@ -1,5 +1,5 @@
 <demo-block title="基础用法">
-  <van-goods-action custom-class="goods-action">
+  <van-goods-action custom-class="goods-action" safe-area-inset-bottom="{{ false }}">
     <van-goods-action-icon
       icon="chat"
       text="客服"
@@ -23,7 +23,7 @@
 </demo-block>
 
 <demo-block title="图标提示">
-  <van-goods-action custom-class="goods-action">
+  <van-goods-action custom-class="goods-action" safe-area-inset-bottom="{{ false }}">
     <van-goods-action-icon icon="chat" text="客服" />
     <van-goods-action-icon icon="cart" text="购物车" info="5" />
     <van-goods-action-icon icon="shop" text="店铺" />

example/pages/submit-bar/index.wxml

@@ -4,6 +4,7 @@
     button-text="提交订单"
     bind:submit="onClickButton"
     custom-class="van-submit-bar"
+    safe-area-inset-bottom="{{ false }}"
   />
 </demo-block>
 
@@ -15,6 +16,7 @@
     tip="您的收货地址不支持同城送, 我们已为您推荐快递"
     bind:submit="onClickButton"
     custom-class="van-submit-bar"
+    safe-area-inset-bottom="{{ false }}"
   />
 </demo-block>
 
@@ -25,6 +27,7 @@
     button-text="提交订单"
     bind:submit="onClickButton"
     custom-class="van-submit-bar"
+    safe-area-inset-bottom="{{ false }}"
   />
 </demo-block>
 
@@ -35,6 +38,7 @@
     bind:submit="onClickButton"
     custom-class="van-submit-bar"
     tip="{{ true }}"
+    safe-area-inset-bottom="{{ false }}"
   >
     <van-tag type="primary" custom-class="van-tag">标签</van-tag>
     <view slot="tip">

example/pages/tabbar/index.wxml

@@ -1,5 +1,5 @@
 <demo-block title="基础用法">
-  <van-tabbar active="{{ active }}" custom-class="tabbar" bind:change="onChange">
+  <van-tabbar active="{{ active }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
     <van-tabbar-item icon="shop">标签</van-tabbar-item>
     <van-tabbar-item icon="chat" dot>标签</van-tabbar-item>
     <van-tabbar-item icon="records" info="5">标签</van-tabbar-item>
@@ -8,7 +8,7 @@
 </demo-block>
 
 <demo-block title="自定义图标">
-  <van-tabbar active="{{ active2 }}" custom-class="tabbar" bind:change="onChange">
+  <van-tabbar active="{{ active2 }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
     <van-tabbar-item>
       <span>自定义</span>
       <image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />

packages/action-sheet/README.md

@@ -88,6 +88,7 @@ Page({
 | cancel-text | 取消按钮文字 | `String` | - |
 | overlay | 是否显示遮罩层 | `Boolean` | - |
 | close-on-click-overlay | 点击遮罩是否关闭菜单 | `Boolean` | - |
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
 
 ### Event
 

packages/action-sheet/index.ts

@@ -20,6 +20,10 @@ VantComponent({
     closeOnClickOverlay: {
       type: Boolean,
       value: true
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
     }
   },
 

packages/action-sheet/index.wxml

@@ -4,6 +4,7 @@
   z-index="{{ zIndex }}"
   overlay="{{ overlay }}"
   custom-class="van-action-sheet"
+  safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
   close-on-click-overlay="{{ closeOnClickOverlay }}"
   bind:close="onClose"
 >

packages/common/style/var.less

@@ -55,3 +55,6 @@
 @toast-default-padding: 15px;
 @toast-default-width: 90px;
 @toast-default-min-height: 90px;
+
+// iPhoneX
+@safe-area-inset-bottom: 34px;

packages/goods-action/README.md

@@ -64,6 +64,12 @@ Page({
 </van-goods-action>
 ```
 
+### GoodsAction API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
+
 ### GoodsActionIcon API
 
 | 参数 | 说明 | 类型 | 默认值 |

packages/goods-action/index.less

@@ -1,9 +1,14 @@
 @import '../common/style/var.less';
 
 .van-goods-action {
-  left: 0;
+  position: fixed;
   right: 0;
   bottom: 0;
+  left: 0;
   display: flex;
-  position: fixed;
+  background-color: @white;
+
+  &--safe {
+    padding-bottom: @safe-area-inset-bottom;
+  }
 }

packages/goods-action/index.ts

@@ -1,3 +1,19 @@
 import { VantComponent } from '../common/component';
 
-VantComponent();
+VantComponent({
+  props: {
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  computed: {
+    rootClass() {
+      const { safeAreaInsetBottom, isIPhoneX } = this.data;
+      return this.classNames('van-goods-action', 'custom-class', {
+        [`van-goods-action--safe`]: isIPhoneX && safeAreaInsetBottom
+      });
+    }
+  }
+});

packages/goods-action/index.wxml

@@ -1,3 +1,3 @@
-<view class="van-goods-action custom-class">
+<view class="{{ rootClass }}">
   <slot />
 </view>

packages/mixins/basic.ts

@@ -1,6 +1,21 @@
 import { classNames } from '../common/class-names';
 
 export const basic = Behavior({
+  created() {
+    wx.getSystemInfo({
+      success: ({ model, screenHeight }) => {
+        const isIphoneX = /iphone x/i.test(model);
+        const isIphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
+
+        if (isIphoneX || isIphoneNew) {
+          this.setData({
+            isIPhoneX: true
+          });
+        }
+      }
+    });
+  },
+
   methods: {
     classNames,
 

packages/popup/README.md

@@ -54,6 +54,7 @@ Page({
 | custom-style | 自定义弹出层样式 | `String` | `` |
 | overlay-style | 自定义背景蒙层样式 | `String` | `` |
 | close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` |
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
 
 ### Event
 

packages/popup/index.less

@@ -44,6 +44,10 @@
     bottom: auto;
     left: 0;
   }
+
+  &--safe {
+    padding-bottom: @safe-area-inset-bottom;
+  }
 }
 
 @keyframes van-center-enter {

packages/popup/index.ts

@@ -23,6 +23,20 @@ VantComponent({
     position: {
       type: String,
       value: 'center'
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  computed: {
+    popupClass() {
+      const { position, safeAreaInsetBottom, isIPhoneX } = this.data;
+      return this.classNames('custom-class', 'van-popup', {
+        [`van-popup--${position}`]: position,
+        [`van-popup--safe`]: isIPhoneX && safeAreaInsetBottom && position === 'bottom'
+      });
     }
   },
 

packages/popup/index.wxml

@@ -8,7 +8,7 @@
 />
 <view
   wx:if="{{ inited }}"
-  class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }}"
+  class="{{ popupClass }}"
   style="z-index: {{ zIndex }}; -webkit-animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; {{ display ? '' : 'display: none;' }}{{ customStyle }}"
   bind:animationend="onAnimationEnd"
 >

packages/submit-bar/README.md

@@ -74,6 +74,7 @@
 | disabled | 是否禁用按钮 |  `Boolean` | `false` |
 | loading | 是否显示加载中的按钮 |  `Boolean` | `false` |
 | currency | 货币符号 |  `String` | `¥` |
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
 
 ### Event
 

packages/submit-bar/index.less

@@ -22,6 +22,10 @@
     height: 50px;
     background-color: @white;
     font-size: 14px;
+
+    &--safe {
+      padding-bottom: @safe-area-inset-bottom;
+    }
   }
 
   &__text {

packages/submit-bar/index.ts

@@ -22,6 +22,10 @@ VantComponent({
     buttonType: {
       type: String,
       value: 'danger'
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
     }
   },
 
@@ -37,6 +41,13 @@ VantComponent({
     tipStr() {
       const { tip } = this.data;
       return typeof tip === 'string' ? tip : '';
+    },
+
+    barClass() {
+      const { isIPhoneX, safeAreaInsetBottom } = this.data;
+      return this.classNames('van-submit-bar__bar', 'bar-class', {
+        'van-submit-bar__bar--safe': safeAreaInsetBottom && isIPhoneX
+      });
     }
   },
 

packages/submit-bar/index.wxml

@@ -5,7 +5,7 @@
     {{ tipStr }}<slot name="tip" />
   </view>
 
-  <view class="van-submit-bar__bar bar-class">
+  <view class="{{ barClass }}">
     <slot />
     <view class="van-submit-bar__text">
       <block wx:if="{{ hasPrice }}">

packages/tabbar/README.md

@@ -75,6 +75,7 @@ Page({
 | active | 当前选中标签的索引 | `Number` | - |
 | fixed | 是否固定在底部 | `Boolean` | `true` |
 | z-index | 元素 z-index | `Number` | `1` |
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
 
 ### Tabbar Event
 

packages/tabbar/index.less

@@ -1,14 +1,18 @@
 @import '../common/style/var.less';
 
 .van-tabbar {
+  display: flex;
   width: 100%;
   height: 50px;
-  display: flex;
   background-color: @white;
 
   &--fixed {
-    left: 0;
-    bottom: 0;
     position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  &--safe {
+    padding-bottom: @safe-area-inset-bottom;
   }
 }

packages/tabbar/index.ts

@@ -27,6 +27,10 @@ VantComponent({
     zIndex: {
       type: Number,
       value: 1
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
     }
   },
 
@@ -35,6 +39,16 @@ VantComponent({
     currentActive: -1
   },
 
+  computed: {
+    tabbarClass() {
+      const { fixed, isIPhoneX, safeAreaInsetBottom } = this.data;
+      return this.classNames('custom-class', 'van-tabbar', 'van-hairline--top-bottom', {
+        'van-tabbar--fixed': fixed,
+        'van-tabbar--safe': isIPhoneX && safeAreaInsetBottom
+      });
+    }
+  },
+
   watch: {
     active(active) {
       this.setData({ currentActive: active });

packages/tabbar/index.wxml

@@ -1,5 +1,5 @@
 <view
-  class="custom-class van-tabbar van-hairline--top-bottom {{ fixed ? 'van-tabbar--fixed' : '' }}"
+  class="{{ tabbarClass }}"
   style="{{ zIndex ? 'z-index: ' + zIndex : '' }}"
 >
   <slot />