uni-app底部安全距离遮挡以及底部tabbar距离

前言：iphoneX的底部安全距离会遮挡编译后的页面。不过uni-app直接写的tabbar是不会的，但是其他子页面就中招了

就是这个鬼东西（网上拿的图）.png

如下图左，底部fixed的部分会被部分遮挡；而我们要的效果应该是如下图右

image.png

• 所以要在代码中加入安全距离，如下(设置bottom或者padding-bottom形式)

// ios底部安全距离-padding
.savepadding{
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom); 
    box-sizing: content-box;
}

// ios底部安全距离-bottom
.savebottom{
    bottom: constant(safe-area-inset-bottom);  
    bottom: env(safe-area-inset-bottom); 
}

• 有时候，我们需要在tabbar上加一个底部定位，如图（右边的是打包成h5，不加安全距离的鬼样子。。。）

  
  对比不加安全距离.png

这里我们也需要给她加上安全距离，加上上面的.savepadding

<view class="submit-warp savepadding">
    <view class="choice-all" @click="choiceAll">
        <text class="iconfont" :class="{'icon-choice-sel':isChoiceAll, 'icon-choice-nor':!isChoiceAll}"></text> <text>全选</text>
    </view>
    <view class="right-warp">
        <text>合计:</text>
        <text class="price">¥{{$toFixed(priceAll)}}</text>
        <app-button @click="submitOrder">结算({{choiceNum}})</app-button>
    </view>
</view>

设置bottom为 var(--window-bottom);

.submit-warp{position: fixed;bottom: var(--window-bottom);left: 0;right: 0;height: 0.5*200upx;line-height: 0.5*200upx;background: #fff;}

好啦，完成。。。撒花花～～～