html部分

<div id="scro" style="height:300px;overflow: auto;" >
      <a-table 
         style="margin-top:20px;background:#fff" :columns="columns" 
         :dataSource="dataSource" :customRow="customRow" :pagination="false">
      </a-table>
</div>

js部分

  beforeDestroy () {
    // 要进行函数卸载
    this.scroEl.removeEventListener('scroll', this.handleScroll)
  },
  mounted () {
    // this.dragJs()
    this.listenerFunction()
    var scroEl = document.getElementById('scro')
    this.scroEl = scroEl
  },
  methods: {
    // 监听滚动事件 scroEl是table外的div的dom
    listenerFunction (e) {
      var scroEl = document.getElementById('scro')
      scroEl.addEventListener('scroll', this.handleScroll, true)
    },
    handleScroll () {
      // scroel
      var scroEl = document.getElementById('scro')
      // 获取内容高度
      const scrollHeight = scroEl.scrollHeight
      // 获取滚动条纵坐标位置
      const scrollTop = scroEl.scrollTop
      // 我给的div高度是300px
      // 判断是否到底部是的话把数据push进去
      if (scrollHeight === scrollTop + 300) {
        this.dataSource.push({
          name: '测试',
          age: 16,
          address: '测试',
          key: 13
        })
      }
    },
}

判断滚动条是否触底逻辑就是 scrollHeight===scrollTop+div的高度(或者window.clientheight)

Logo

前往低代码交流专区

更多推荐