小程序适配底部元素适配iphoneX样式

 没有适配时的样式，想要适配只需要得到设备的安全距离，然后动态计算一下就好了

globalData: {
    //全局变量，底部安全距离
    tbBottom: 0,
}

onLaunch: function () {
    //获取底边高度
    this.globalData.tbBottom = wxSync.screenHeight - wxSync.safeArea.bottom;
}

在app.vue页面定义全局变量方便使用，在onLunch时获取底边高度，onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

<view class="btn_box" :style="{ '--height': `${tbBottom}px` }">
    <van-button type="info" size="large" color="#3C9CFF" @click="addSell">添加销售品        
    </van-button>
</view>

data() {
      return {
          tbBottom: getApp().globalData.tbBottom,
      }
},

.btn_box {
   width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: var(--height);
    // background: #3C9CFF;
}

在我们需要用到的界面从全局变量中拿到底边高度，然后再标签上用动态样式设置一个变量'--height',值就是我们的底边高度，因为button是使用组件写的，担心不生效所以再外面套了一层盒子，大家可以尝试直接在元素上写。

 这是添加了动态padding的效果，可以看出高出的一截可以看到下面的界面，所以要给我的盒子加上一个与button颜色一致的背景色。但是如果直接在要改变的元素上做操作的话就不用了。所以视情况看样式写给哪个元素。

最后实现效果

普通机型

iphone X