移动端或pc端封装vue指令,实现长列表滚动加载数据

大家在工作中应该有遇到过滚动加载更多数据的需求吧，而我遇到的是在 element-ui框架中，table表格的数据实现滚动加载，这样的情况下，最适合的方案就是封装指令进行滚动加载的操作了哦~

封装指令，在整个vue项目里都可以使用，而且更简单清晰，操作起来性能更优

1. 先封装指令

一般放在 utils 文件夹下

如果一直滚动的话，触发太频繁会导致性能不好，所以这里引用了一个 防抖 函数

import Vue from 'vue'
import {debounce} from './tools'  // 这里引用了防抖函数

Vue.directive('loadmore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table_body-wrapper')
    selectWrap.addEventListener('scroll', debounce( function(){
      const sign = 1
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight - 100
      if(scrollDistance <= sign && this.scrollTop > 0) {
        binding.value()
      }
    }, 100))
    
  }
})

 2.封装的防抖函数

封装在 tools.js 文件里

export function debo