@scroll和el-table自定指令（滚动出现按钮/回到顶部/底部请求分页数据/防抖）

最近出现了很多页面都需要滚动翻页的需求

div的@scroll滚动事件

示例图

template

<div id="order" @scroll="scrollEvent" ref="scrollWrapper">
  滚动条中间内容略...
<div>
// 只做示例，就用按钮简单实现功能。
<el-button round icon="el-icon-top" @click="toTop('order')" v-if="showTop">顶部</el-button>

script

// 表格滚动
scrollEvent(e) {
  if (e.srcElement.scrollTop>你希望滚动到哪个数字会出现‘回到顶部’，例如300) {
    this.showTop = true;
  } else {
    this.showTop = false;
  }
  let top = e.srcElement.scrollTop; // 保存加载前的滚动条高度
  // 滑到最底部
  if (e.srcElement.scrollTop + e.srcElement.clientHeight >= e.srcElement.scrollHeight ) {
    // 非最后一页都要继续请求（后端为了速度，不在返回真实total，而返回-1）
    // haveNextPage的判断放在其他页面（逻辑是：当页的list长度===页码*条数haveNextPage为true，否则为false）
    if (this.haveNextPage) {
      // 1s防抖
      let timeout = null;
      if (timeout) {
        clearTimeout(timeout);
      }
      timeout = setTimeout(() => {
        this.getNextPage(top);
      }, 1000)
     }
    }
  }
},
// 加载下一页：滚动到底部+后面有数据
getNextPage (top) {
  // 后端不返回正常total值，滚动加载统一为total<0
  // if (this.page.total > (this.page.pageNum * this.page.pageSize)) {
  let self = this;
  后端list接口(url, self.searchData).then((res) => {
    if (请求成功) {
      // 添加数据+更新页码
      self.page.list.push(...res.result.list);
      self.page.pageNum = res.result.pageNum;
      // 滚动条重新定位
      this.$nextTick(() => {
        this.$refs.scrollWrapper.scrollTo(0, top);
      })
    }
  });
},
// 回到顶部
toTop(name) {
  let e = document.getElementById(name);
  e.scroll({top: 0, left: 0, behavior: 'smooth' }); // smooth滚动不至于太快
},

el-table添加自定义指令（局部）

注：省略回到顶部功能

template

<el-table
  border
  stripe 
  :data="xx"
  height="400"
  v-loadmore="loadMore"
>...</table>

script

export default {
  directives: {
    loadmore: {
      bind: function (el, binding) {
        const ele = el.querySelector('.el-table__body-wrapper');
        ele.addEventListener('scroll', function () { 
          // 这里的this是指令内部实例
          let top = this.scrollTop;
          // 滑到最底部
          if (this.scrollTop + this.clientHeight >= this.scrollHeight) {
            binding.value(top);
          }
        })
      }
    }
  },
  methods: {
    loadMore (top) {
      if (this.haveNextPage) {
        let timeout = null;
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
          this.getNextPage(top);
        }, 1000)
      }
    },
    // 其他的相同的method省略
  }
}