vue.js判断滚动条滚动到底部后（防抖节流）进行数据的分页请求

整体思路

VUE2.0其实有很多的插件来，而且功能很强大，还提供很多的插槽来，之前跟着师父做的项目里直接用了vue-infinite-loading，功能也很强大，点击这里可以直接看我之前写的博客。
vue-infinite-loading: 链接.
今天主要介绍一下原生的JS怎么去做判断
主要用3个属性，scrollTop，scrollHeight，clientHeight
scrollTop：鼠标滚动Y轴的距离
scrollHeight：滚轮的整体高度
clientHeight：浏览器的可视高度
so：判断滚动到底部的判断就是
if(scrollTop+clientHeight==scrollHeight)

监听代码

  mounted() {
    window.addEventListener('scroll',this.handleScroll)
  },
  methods: {
  	handleScroll(){
      let scrollTop=document.documentElement.scrollTop//滚动条在Y轴滚动过的高度
      let scrollHeight=document.documentElement.scrollHeight//滚动条的高度
      let clientHeight=document.documentElement.clientHeight//浏览器的可视高度
      //so 判断滚动条到底部的判断条件就是
      //scrollTop+clientHeight==scrollHeight
      // console.log('滚动高度',document.documentElement.scrollHeight)
      // console.log('浏览器的可视高度',document.documentElement.clientHeight)
      // console.log('距离顶部的高度u',scrollTop)
      if(scrollTop+clientHeight==scrollHeight){
        console.log('滚动到底部了')
      }
    }
  }

其实这样的话会发现对我们浏览器的性能消耗是很大的，so我们要对它进行优化，优化的2个方式就是防抖和节流。

防抖节流

防抖就是规定时间内执行最后一次，节流就是规定时间内执行第一次

    //防抖
    debounce(fn, delay) {
      let timer = null; //借助闭包
      return function () {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(fn, delay); // 简化写法
      };
    },
  mounted() {
    window.addEventListener("scroll", this.debounce(this.handleScroll, 500));
  },

这样的话就是0.5秒内触发一次。