先說(shuō)問(wèn)題：看2張圖

1.png

2.png

假定下面那個(gè)注解為元素1，需要定位再底部Bar上面。我們這里底部Bar高度為1.16rem，所以我們要定位上去。簡(jiǎn)單。
元素1 bottom:1.16rem就完事了。
正常來(lái)說(shuō)是對(duì)的，但是忽略一個(gè)問(wèn)題。IPhoneX以后機(jī)型是有3部分組成?？聪聢D：

3.png

簡(jiǎn)單點(diǎn)來(lái)說(shuō)，就是這機(jī)型有安全距離。所以就回出現(xiàn)最上面我所發(fā)現(xiàn)的問(wèn)題。
百度下，發(fā)現(xiàn)要寫(xiě)的樣式頗多，改動(dòng)頗大。
首先，我們的項(xiàng)目已經(jīng)很龐大，不便于我們做大的改動(dòng)，其次學(xué)習(xí)成本也是一個(gè)問(wèn)題吧？當(dāng)然了，不包括天才一看就懂的。

廢話(huà)不多說(shuō)了，直接上最我認(rèn)為最有效(這里打個(gè)？)，最簡(jiǎn)單的解決方案：

// 這里是寫(xiě)在請(qǐng)求完成之后，也就是說(shuō)數(shù)據(jù)加載完成后。
this.$nextTick(() => {
    // 需求---某個(gè)元素固定定位不同機(jī)型適配問(wèn)題
    // 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 頁(yè)面元素的paddingbottom = 2 + 3
    this.$refs.retreatList.style.paddingBottom = bottomNavHeight + tipsInfoHeight + "px";
});