功能扩展————滚动加载关联分页

---

功能描述:table+Pagination

将滚动条与分页组建进行联动；

1. 在一个list组建中进行渲染,超出部分显示滚动条
2. 滚动条下拉加载，追加之前的list数据
3. 点击已经加载过的分页码跳转到对应的加载位置
4. 拖动滚动条随着数据的变化分页组建的页码也跟着进行变化
   
   

功能分析

1. 实现以上功能首先了解分页组建的基本使用及滚动条追加懒加载出发时机
2. 第一步监听滚动条滑动到底部的状态
3. 第二步接口分页加载请求进行数据追加
4. 第三步更新数据渲染分页器，页码高亮
5. 第四步获取页码点击事件与已加载渲染数据通过高度关联
6. 第五步监听滚动条事件，根据滚动条所在的高度关联页码高亮

功能实现

1. 监听滚动条滑动到底部的状态

在此我用的是原生的形式去监听滚动条事件（也可以使用组建）

    // 滑动进行懒加载分页
    this.$nextTick(() => {
      // 滚动的容器
      const el = document.querySelector('.box');
      // 获取
      const offsetHeight = el.offsetHeight;
      el.onscroll = () => {
        const scrollTop = el.scrollTop;
        const scrollHeight = el.scrollHeight;
        const clientHeight = el.clientHeight;
        //监听滚动条滑动到底部的区域
        const isBottom = offsetHeight + scrollTop - scrollHeight >= 0;
        // this.activesStatus 请求列表的数据状态是否为空
        // this.loading 请求状态
        if (isBottom && this.activesStatus && !this.loading) {
          // 需要执行的代码
          this.searchParams.pageNum += 1;
          this.loading = true;
          this.initEchartsList(this.searchParams);
        } else if (isBottom && !this.activesStatus && !this.loading) {
          let that = this;
          // 由于滚轮请求会形成抖动
          clearTimeout(that.showTimer);
          that.showTimer = setTimeout(function () {
            that.$message.warning('没有数据了');
          }, 2000);
        } else if (!isBottom && !this.activesStatus) {
        // 根据滑动状态出发分页高亮
          this.searchParams.pageNum = Math.ceil(
            scrollTop / (clientHeight + 20) + 1
          );
        }
      };
    });

关于属性介绍

页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth   （包含边线的宽）;
网页可见区域高： document.body.offsetHeight （包含边线的宽）;
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文项目组上： window.screenTop;
网页正文项目组左： window.screenLeft;
屏幕辨别率的高： window.screen.height;
屏幕辨别率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

2. 出发分页方法

代码如下（示例）：

    // 分页change
    pageChange (pageNum) {
      // this.searchParams.pageNum = pageNum;
      let scorllDom = document.querySelector('.content-chart');
      scorllDom.scrollTop =
        (scorllDom.clientHeight + 20) * (pageNum - 1) * this.pageMean;
      console.log('  scorllDom.scrollTop ', scorllDom.scrollTop);
    },