vue列表鼠标滚动翻页（数据量较大，几千万条数据，因此要滚动翻页，为了性能良好，鼠标滚动时发送请求页码page++），网上找不到自己写了一个，

针对数据量巨大的列表，本文介绍了一种在Vue中实现鼠标滚动时动态加载更多数据的方法，避免一次性加载所有数据导致性能问题。通过监听滚动事件并自定义处理方法，计算滚动位置以决定何时发送请求。同时，讨论了无限滚动卡片的优化策略，只显示有限数量的卡片以减少内存占用，提高页面滑动的流畅性。

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

标题：vue列表鼠标滚动翻页（数据量较大，几千万条数据，因此要滚动翻页，为了性能良好，鼠标滚动时发送请求页码page++），网上找不到自己写了一个，如果用window. 或document.body会导致滚动穿透，导致如果多个页面要用到滚动翻页时，会发送其他页面的ajax或axios

1.先在要滚动的div上自定义名称 ref=“scrolltoplist”

<div ref="scrolltoplist" class="scrolltoplist"></ div>

2.监听绑定滚轮，滚动事件，调用自定义的this.handleScroll方法

  mounted() {
    this.$refs.scrolltoplist.addEventListener(
      "scroll",
      this.handleScroll,
      true
    );
    // 监听（绑定）滚轮 滚动事件
  },

3.自定义方法计算滚动时发送请求
scrollTop滚动距离顶部的高度，
lientHeight文档的高度不包括，
scrollHeight 滚动的高度

handleScroll() {
// scrollTop滚动距离顶部的高度
// clientHeight文档的高度 不包括
// scrollHeight 滚动的高度
      if (
        this.$refs.scrolltoplist.scrollTop +
          this.$refs.scrolltoplist.clientHeight >=
        this.$refs.scrolltoplist.scrollHeight - 50
      ) {
        console.log("down");
        if (this.count >= this.pageNo * 60) {
          this.loading2 = true;
          this.loadData();
        } else {
          return false;
        }
      } else {
        console.log("error");
        return false;
      }
 }

、

loadData() {
  this.pageNo = this.pageNo + 1;
  this.getUserList();
},

4.写到这里想写一下，在app中下拉加载（浏览器中不那么容易出现），当数据过多造成页面元素过多，导致内存增加，这个问题就会导致页面滑动变卡顿
答：无限滑动的卡片，做法是只显示三个，其他的移除掉，需要时再加载。