diff --git a/example/pages/goods-action/index.wxml b/example/pages/goods-action/index.wxml
index 322409da..4c71c0d2 100644
--- a/example/pages/goods-action/index.wxml
+++ b/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="店铺" />
diff --git a/example/pages/submit-bar/index.wxml b/example/pages/submit-bar/index.wxml
index d9700da5..7547daa1 100644
--- a/example/pages/submit-bar/index.wxml
+++ b/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">
diff --git a/example/pages/tabbar/index.wxml b/example/pages/tabbar/index.wxml
index ba7881f8..0d7f220a 100644
--- a/example/pages/tabbar/index.wxml
+++ b/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" />
diff --git a/packages/action-sheet/README.md b/packages/action-sheet/README.md
index 7ee47182..aff2563f 100644
--- a/packages/action-sheet/README.md
+++ b/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
diff --git a/packages/action-sheet/index.ts b/packages/action-sheet/index.ts
index e43735a1..a1acd00f 100644
--- a/packages/action-sheet/index.ts
+++ b/packages/action-sheet/index.ts
@@ -20,6 +20,10 @@ VantComponent({
closeOnClickOverlay: {
type: Boolean,
value: true
+ },
+ safeAreaInsetBottom: {
+ type: Boolean,
+ value: true
}
},
diff --git a/packages/action-sheet/index.wxml b/packages/action-sheet/index.wxml
index 5bfe879d..2435c5c1 100644
--- a/packages/action-sheet/index.wxml
+++ b/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"
>
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 26186edc..b313db8e 100644
--- a/packages/common/style/var.less
+++ b/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;
diff --git a/packages/goods-action/README.md b/packages/goods-action/README.md
index 764eb596..0b27ecb6 100644
--- a/packages/goods-action/README.md
+++ b/packages/goods-action/README.md
@@ -64,6 +64,12 @@ Page({
</van-goods-action>
```
+### GoodsAction API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` |
+
### GoodsActionIcon API
| 参数 | 说明 | 类型 | 默认值 |
diff --git a/packages/goods-action/index.less b/packages/goods-action/index.less
index f9bfb4e7..63f2d2e3 100644
--- a/packages/goods-action/index.less
+++ b/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;
+ }
}
diff --git a/packages/goods-action/index.ts b/packages/goods-action/index.ts
index 5d0c1360..4a9bf784 100644
--- a/packages/goods-action/index.ts
+++ b/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
+ });
+ }
+ }
+});
diff --git a/packages/goods-action/index.wxml b/packages/goods-action/index.wxml
index 831d1685..cfc009c7 100644
--- a/packages/goods-action/index.wxml
+++ b/packages/goods-action/index.wxml
@@ -1,3 +1,3 @@
-<view class="van-goods-action custom-class">
+<view class="{{ rootClass }}">
<slot />
</view>
diff --git a/packages/mixins/basic.ts b/packages/mixins/basic.ts
index 50ede2fc..11236f47 100644
--- a/packages/mixins/basic.ts
+++ b/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,
diff --git a/packages/popup/README.md b/packages/popup/README.md
index 5f14b0f0..53e02a20 100644
--- a/packages/popup/README.md
+++ b/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
diff --git a/packages/popup/index.less b/packages/popup/index.less
index 9fece23f..d57465b2 100644
--- a/packages/popup/index.less
+++ b/packages/popup/index.less
@@ -44,6 +44,10 @@
bottom: auto;
left: 0;
}
+
+ &--safe {
+ padding-bottom: @safe-area-inset-bottom;
+ }
}
@keyframes van-center-enter {
diff --git a/packages/popup/index.ts b/packages/popup/index.ts
index 3eafdaad..d100fe0b 100644
--- a/packages/popup/index.ts
+++ b/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'
+ });
}
},
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
index 95c07bbd..07bd1ae1 100644
--- a/packages/popup/index.wxml
+++ b/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"
>
diff --git a/packages/submit-bar/README.md b/packages/submit-bar/README.md
index 71e23129..869e0423 100644
--- a/packages/submit-bar/README.md
+++ b/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
diff --git a/packages/submit-bar/index.less b/packages/submit-bar/index.less
index b692c372..10e1de0f 100644
--- a/packages/submit-bar/index.less
+++ b/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 {
diff --git a/packages/submit-bar/index.ts b/packages/submit-bar/index.ts
index 55bbeff0..8cf54459 100644
--- a/packages/submit-bar/index.ts
+++ b/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
+ });
}
},
diff --git a/packages/submit-bar/index.wxml b/packages/submit-bar/index.wxml
index 53ae8335..a2bc998d 100644
--- a/packages/submit-bar/index.wxml
+++ b/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 }}">
diff --git a/packages/tabbar/README.md b/packages/tabbar/README.md
index d8547f5b..75851724 100644
--- a/packages/tabbar/README.md
+++ b/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
diff --git a/packages/tabbar/index.less b/packages/tabbar/index.less
index 3fd7e4fc..c94aeb91 100644
--- a/packages/tabbar/index.less
+++ b/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;
}
}
diff --git a/packages/tabbar/index.ts b/packages/tabbar/index.ts
index bc44e527..065395c2 100644
--- a/packages/tabbar/index.ts
+++ b/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 });
diff --git a/packages/tabbar/index.wxml b/packages/tabbar/index.wxml
index 76b1b46b..b8eb8e47 100644
--- a/packages/tabbar/index.wxml
+++ b/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 />