zoukankan      html  css  js  c++  java
  • vue列表鼠标滚动翻页(数据量较大,几千万条数据,因此要滚动翻页,为了性能良好,鼠标滚动时发送请求页码page++),网上找不到自己写了一个,

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

  • 相关阅读:
    进程及进程调度
    加强版水王:找出出现次数刚好是一半的数字
    寻找最小的k个数(四种方法)
    Count Primes
    深入理解计算机系统结构——并发编程
    深入理解计算机系统——系统级I/O
    深入理解计算机系统结构——虚拟存储器
    老生常谈:关于undo表空间的使用率
    OSW 快速安装部署
    Oracle参数设置之set与reset的实际案例
  • 原文地址:https://www.cnblogs.com/guanhuohuo/p/12526208.html
Copyright © 2011-2022 走看看