1、需求导入

开发的过程中后台返回数据较多一般会使用到分页的功能，因为数据一次性导出会导致页面数据加载过慢，但是有时候用户不希望用表格，比如一个div或者ul列表然后数据做成滚动条的形式去分页处理。

2、实现的逻辑思路

实现的过程：通过给滚动条加上监听事件

• scrollTop：滑动条距离滚动条顶部的距离
• scrollHeight：可滚动内容高度
• clientHeight：屏幕高度
  首先理解三者的区别：（可能还有不够准确的地方望补充纠正）
  

  

实现加载思路：滑动条距离滚动条底部的高度加上滚动条滚动了的高度小于等于文档的高度减去可视区的高度即调取后台接口数据加载数据即可实现。

3、代码部分

HTML:

          <div id="scrollTable" @scroll="loading && scrollEvent($event)">
            <div
              class="list-concnet"
              v-show="datalist.length > 0"
              v-for="item in datalist"
              :key="item.id"
              style="display: none"
            >
              <span style="width: 100px">{{ item.id }}</span>
              <span style="width: 100px">{{ item.name }}</span>
              <span class="list-btn"
                >
              <Button type="primary" size="small" @click="showTab(item)">查看</Button>
            </span>
            </div>
            <div v-show="datalist.length === 0" style="display: none">
              <p>暂无记录</p>
            </div>

使用一个div，通过for循环将数据遍历展示到页面上去，然后在div内部写需要展示的信息内容.

data选项：

      currentIndex: 1,//当前的页码值
      status: false,//状态值
      loading: true,//是否加载
      datalist: [],

methods选项：

    //处理函数
    scrollHandler: function (e) {
      //如果已经在加载数据，不可以重复加载
      if (this.status) return;
      if (e instanceof Event) {
        var el = e.target;
        var scHeight = el.scrollHeight,
          scTop = el.scrollTop,
          clHeight = el.clientHeight;
        //开始加载数据
        this.status = true;
        if (
          scHeight - scTop > clHeight + 10 &&
          this.currentIndex < sessionStorage.getItem("pages")
        ) {
          ++this.currentIndex;
          locationMonitorlist({
            pn: this.currentIndex, // 一旦调取这个接口，页码值就 +1
            ps: this.ps,
            productId: this.model,
            keyword: this.value,
          })
            .then((res) => {
              if (res.code == 0) {
                //调用拼接数据事件
                if (this.datalist.length != 0) {
                  this.datalist = this.datalist.concat(res.data.records);
                  console.log(this.datalist);
                }
                this.status = false;
              }
            })
            .catch(() => {
              this.status = false;
            });
        }
      }
    },

参考网上一些处理方式，也加了节流处理以及判断是否页码值与接口返回的页码值pages相等，如果相等了就不让它再去调接口了.

节流处理

    //滚动时对滚动事件进行节流
    scrollEvent: function (e) {
      this.throttled(this.scrollHandler(e), 300);
    },
    //节流
    throttled: function (func, wait, options) {
      var self = this;
      var timeout, context, args, result;
      var previous = 0;
      if (!options) options = {};
      var later = function () {
        previous = options.leading === false ? 0 : self.now();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      };

      var throttled = function () {
        var now = self.now();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          result = func.apply(context, args);
          if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
          timeout = setTimeout(later, remaining);
        }
        return result;
      };
      throttled.cancel = function () {
        clearTimeout(timeout);
        previous = 0;
        timeout = context = args = null;
      };
      return throttled;
    },
    now: function () {
      return new Date().getTime();
    },

最后加上初始化的监听事件：

    //初始化监听事件
    initPage: function () {
      if (this.currentIndex === sessionStorage.getItem("pages")) {
        //如果等于最后一页，就停止滚动
        this.$Message.warn("数据全部加载完成!");
        this.loading = false;
      } else {
        this.scrollHandler();
      }
    },

我这里的逻辑是在一开始页面调数据接口的时候，pageNumber还是1的时候，就获取到接口返回的pages的页码值，然后存在会话中去sessionStorage，（方法有点愚笨，但是想到好的办法会去优化代码的）再初次初始化监听的时候就拿到会话里的值，一旦开始滚动就去判断滚动时的currentIndex的页码值是否小于接口返回的pages，只要不等，那么就是小于pages，就让他调接口数据，注意代码部分：currentIndex加1后再去调接口，返回的是第二页的数据信息，这样就实现了滚动加载。

生命周期中调取方法：

mounted() {
    this.getdata();  // 第一次调取接口的时候通过这个拿到接口返回的pages
    this.initPage(); //初始化监听事件
  },

展示效果