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

郝东建
  • 2
新手上路,请多包涵

问题描述

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

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

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

相关代码

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

clipboard.png
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)
}

}

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

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

回复
阅读 2.6k
5 个回答
郝东建
  • 2
新手上路,请多包涵
✓ 已被采纳

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

donhanttt
  • 5
新手上路,请多包涵

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

// this.$refs.xxx...

})

content100%是固定的吗?
都直接计算好了。写个死的px呢?

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏