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

uni-app在小程序和app中开发使用框架原生自带的tab栏是没问题的，但是最近用uniapp开发H5页面时才发现，使用框架原生自带的底部tab栏就会出问题了，层级z-index大概就是99，很容易就会被遮住了。原生底部tab栏的高度一般就是98rpx，所以给最底层的dom元素设置bottom时，就设置成98rpx，但是随着屏幕高度发生变化后，位置又会出问题。
如下图左，底部fixed的部分会被部分遮挡；而我们要的效果应该是如下图右

所以要在代码中加入安全距离，如下(设置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