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

冷不防 2022-03-12 05:13 263阅读 0赞

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

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

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