vue判断滚动条是否触底（触底增加数据）

最新推荐文章于 2025-06-19 10:34:53 发布

是谁的心儿啊

最新推荐文章于 2025-06-19 10:34:53 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：滚动条触底判断文章标签： javascript

本文链接：https://blog.csdn.net/dashinihao/article/details/119380123

滚动条触底判断专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现的滚动加载更多功能。当用户滚动到页面底部时，自动加载更多数据，无需点击按钮。该方法适用于无限滚动或分页场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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）