用css设置小程序fixed固定底部栏适配iphonx系列底部刘海

wxml：

外面套一层

<view class="page page--with-footer">

...

//底部固定区域

<view class=" btns">

  <view class="signs">报名</view>

  </view>

</view>

css:

.btns{

  width: 100%;

  position: fixed;

  left: 0;

  bottom: 0;

  background:#fff;

  padding-bottom: constant(safe-area-inset-bottom);

 padding-bottom: env(safe-area-inset-bottom);

}

 

.page--with-footer {

  padding-bottom: 78rpx;

  padding-bottom: calc(78rpx + constant(safe-area-inset-bottom));

  padding-bottom: calc(78rpx + env(safe-area-inset-bottom));

 }

 

注：在按钮外层套一层view  设置背景色为白色，否则，底部横栏的颜色会和导航栏颜色一致。