前言：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;}
好啦，完成。。。撒花花～～～
