vue 解决:Error in v-on handler: “TypeError: Cannot read property ‘compareTo‘ of undefined“

vue 解决:Error in v-on handler: “TypeError: Cannot read property ‘compareTo‘ of undefined“

解决方法:这里必须是$refs和ref对应,并且调用的compareTo需要名称一致 一定要仔细检查调用的名称 大小写不能乱

用于下滑加载数据 可视区

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

1.语法：这个方法没有参数。
rectObject = object.getBoundingClientRect();
2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（ 上， 右 ， 下，和左 ）表示的坐标的矩形，以像素为单位。
　rectObject.top：元素上边到视窗上边的距离;
　rectObject.right：元素右边到视窗左边的距离;
　rectObject.bottom：元素下边到视窗上边的距离;
　rectObject.left：元素左边到视窗左边的距离;

mounted(){
    //优化 每隔一段时间 去执行 不用频繁 需要节流函数
    this.scrollHandler = throttle(300,this.scroll.bind(this));
    window.addEventListener("scroll",this.scrollHandler)  //bind指向当前实例
  },
  destroyed(){//销毁
    window.removeEventListener("scroll",this.scrollHandler)
  },
  methods:{
    //事件解绑
    scroll(){
       if(this.isloading) return;
       console.log(123)
        if(this.$refs.waterfall.getBoundingClientRect().bottom < document.documentElement.clientHeight){
          //判断下面的高度是否小于初始的高度
          //getBoundingClientRect用于获取某个元素相对于视窗的位置集合。
          console.log("到达可视区")
          this.isloading=true;
          this.$emit("view")
        }
    }
  }

addEventListener() 方法用于向指定元素添加事件句柄。

JavaScript中Math.ceil的函数方法

 this.pages = Math.ceil(res.data.toal/res.data.page_size)//计算下滑有几页