获取节点距顶部高度时使用 getBoundingClientRect() 方法报错:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: “TypeError: that.$refs.videoItem.getBoundingClientRect is not a function”
在这里插入图片描述

搜到的都是在说需要在销毁阶段要取消监听scroll,我这个并不是,仔细看了下导致找不到的原因发现是我给的组件ref导致的。组件 .$refs 拿到的是VueComponent,加个 .$el 就能拿到了

<vVideoItem ref="videoItem"></vVideoItem>
<div ref="aa"></div>
  mounted() {
    this.$nextTick(()=>{
      let itemH= this.$refs.videoItem.$el.getBoundingClientRect().top;
      console.log(itemH);
      window.addEventListener('scroll', this.handleScroll);
      
      // let aa= this.$refs.aa.getBoundingClientRect().top;
      // console.log(aa);
    })
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
Logo

前往低代码交流专区

更多推荐