美文网首页
vue document.documentElement.cl

vue document.documentElement.cl

作者: 拾壹丶ban | 来源:发表于2019-03-20 19:48 被阅读0次

其实也不是获取不到,正常手机都能获取的到,但是在个别手机上面获取不到,个别手机指的是华为P20。
因为在Android端,如果你fbc之后getHeight()也是获取不到,我就想是不是mounted函数调用的时候,页面还没有渲染好呢,翻看了一下vue生命周期,果然是,于是我延迟300毫秒获取高度

setTimeOut(()=>{
  ...
},300)

并没有什么卵用,然后我灵光一现,发现vue有这么个方法

    this.$nextTick(() => {
        let height = document.documentElement.clientHeight - this.$refs.scrollWrapper.getBoundingClientRect().top
        this.wrapperHeight = height > 0 ? height : this.wrapperHeight;
      })

然而也没有什么卵用,因为页面是keepLive的,所以我上了个双保险

 activated() {
    window.onload = () => {
        this.wrapperHeight = document.documentElement.clientHeight - 
                                      this.$refs.scrollWrapper.getBoundingClientRect().top;
        console.log("this.wrapperHeight:" + this.wrapperHeight);
      };
    }

这个window.onload见名知意就是页面加载之后回调的,这回终于行了

相关文章

网友评论

      本文标题:vue document.documentElement.cl

      本文链接:https://www.haomeiwen.com/subject/jlatvqtx.html