vue实现 table表格触底加载

483 阅读1分钟

image.png

  mounted() {
    this.$nextTick(() => {
      this.tableTwo = this.$refs.multipleTable.bodyWrapper
      console.log(this.tableTwo, 'this.$refs.multipleTable.bodyWrapper');
      this.tableTwo.addEventListener('scroll', () => {
        //滚动距离
        let scrollTop = this.tableTwo.scrollTop
        //可视区域高度
        let windowHeigth = this.tableTwo.clientHeight || this.tableTwo.clientHeight
        //滚动条总高度
        let scrollHeigth = this.tableTwo.scrollHeight || this.tableTwo.scrollHeight
        //可视距离+可视区高度等于 总高的时候判断为触底   scrollTop可能为小数 达不到  可以向上取整
        if (Math.ceil(scrollTop) + windowHeigth == scrollHeigth) {
          console.log('我触底了');
        }
      })
    })
  },