小程序兼容iphoneX底部横条安全距离

问题点：

小程序iphoneX XR等底部条遮挡操作区,如下图

解决：

<方法文件mixin.scss>

@mixin safeAreaHeight($key) {
  #{$key}: 0;
  #{$key}: constant(safe-area-inset-bottom);
  #{$key}: env(safe-area-inset-bottom);
}

@mixin safeAreaHeightAdd($key, $param: 0) {
  #{$key}: #{$param};
  #{$key}: calc(#{$param} + constant(safe-area-inset-bottom));
  #{$key}: calc(#{$param} + env(safe-area-inset-bottom));
}

<index.scss>
@import '../../../../mixin.scss';

//底部按钮兼容样式
.fixed-bottom {
  box-sizing: content-box;
  @include safeAreaHeight(padding-bottom);
}

同时整个page也要添加padding-bottom

//page兼容样式,100为按钮高度
@include safeAreaHeightAdd(padding-bottom,100px);

完成