rem布局中vue的nextTick获取dom高度有问题

Question

问题描述

移动端rem布局中，通过rem单位设置元素高度，通过vue的nextTick回调获取元素高度，获取的不对

问题出现的环境背景及自己尝试过哪些方法

通过延时计时器可以获取正确高度

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

mounted () {

this.$nextTick(this.resizeContent)

},
methods: {

resizeContent () {
  setTimeout(() => {
    const { top, content, bottom } = this.$refs
    const topH = top.clientHeight
    const bottomH = bottom.clientHeight
    content.style.height = `calc(100% - ${topH + bottomH}px)`
  }, 1)
}

}

你期待的结果是什么？实际看到的错误信息又是什么？

想明白什么原理，有没有通过其他方法可以实现

Answer 1

已经解决了，为html根标签设置rem单位的时机不对

Answer 2

你这this.$nextTick写法是不是不太对啊
this.$nextTick(function(){

// this.$refs.xxx...

})

Answer 3

content的100%是固定的吗？
都直接计算好了。写个死的px呢？

Answer 4

可能是获取clientHeight，引起的回流，影响到了获取其他属性。

Answer 5

首先，this.$nextTick本身就是代表是异步的了，你不需要再使用setTimeout了，第二，content.style.height = calc(100% - ${topH + bottomH}px)这一句里面的100%应当是在content父元素的高度是确定的情况下，才能正确算出来的
你描述的想要实现的场景我之前做过，你保证了我说的父元素高度确定的条件，就能正确算出来的，没什么其他的问题