IPhoneX等不同型号固定定位兼容问题

先说问题：看2张图

1.png

2.png

假定下面那个注解为元素1，需要定位再底部Bar上面。我们这里底部Bar高度为1.16rem，所以我们要定位上去。简单。
元素1 bottom:1.16rem就完事了。
正常来说是对的，但是忽略一个问题。IPhoneX以后机型是有3部分组成。看下图：

3.png

简单点来说，就是这机型有安全距离。所以就回出现最上面我所发现的问题。
百度下，发现要写的样式颇多，改动颇大。
首先，我们的项目已经很庞大，不便于我们做大的改动，其次学习成本也是一个问题吧？当然了，不包括天才一看就懂的。

废话不多说了，直接上最我认为最有效(这里打个？)，最简单的解决方案：

// 这里是写在请求完成之后，也就是说数据加载完成后。
this.$nextTick(() => {
    // 需求---某个元素固定定位不同机型适配问题
    // 1 取底部组件距离顶部的高度
    let bottomNavTop = this.$refs.bottomNav.$el.offsetTop;
    // 2 取底部组件的高度
    let bottomNavHeight = this.$refs.bottomNav.$el.clientHeight;
    // 3 取要定位元素的高度
    let tipsInfoHeight = this.$refs.tipsInfo.clientHeight;
    // 4 要定位的元素固定定位top = 1 - 3
    this.$refs.tipsInfo.style.top = bottomNavTop - tipsInfoHeight + "px";
    // 5 页面元素的paddingbottom = 2 + 3
    this.$refs.retreatList.style.paddingBottom = bottomNavHeight + tipsInfoHeight + "px";
});