这是我参与第四届青训营笔记创作活动的第30天

（本文在此声明，此文为本作者另一个账号所写，参与青训营后发现发现青训营手机号填的不是那个，特此将笔记转载过来）

无限下拉算是我写字节青训营项目遇到的一个小问题。

无限下拉作为当代网页流行的一种构造，一直以来深受很多公司开发的喜爱，而它的实现也不难，接下来就由我来为大家讲解怎么用vue去实现无限下拉。

无限下拉

获取window的总高度

var WindowHeight = document.body.scrollHeight

获取当前页面顶部此刻距离最顶端的距离

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

获取当前页面的高度

var Height = document.documentElement.clientHeight

当这三个变量被获取的那一刻，我相信大家心里对接下来怎么去操作，只要监听window的滚动事件，一旦进行了滚动，那么久监听当前屏幕所占页面与页面总高度相比较大小，一旦相等就说明到了该页面底部，那么就可以进行加载新的数据，以此类推实现无限下拉。

时刻监听滚动事件

对于这种滚轮事件监听，我们通常将其写在生命周期mounted()函数里面，因为这个生命周期函数是在页面进行挂载渲染以后触发的，如果是beforecreate()函数或者created()等函数里面就获取不到相关的DOM结构，就获取不到正确的高度。

于是，我们这样写：

mounted(){
    window.addEventListener('scroll', (e) => {
      var WindowHeight = document.body.scrollHeight
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var Height = document.documentElement.clientHeight
      if(scrollTop + Height>=WindowHeight-10){
        this.recommendDetail = this.recommendDetail.concat(m)
      }
    },
    true)
   }

值得注意的是，这里我那类做比较的是scrollTop + Height>=WindowHeight-10，因为如果直接拿scrollTop + Height和WindowHeight做比较的话可能会出现下拉到底，但是却不触发判断他们两者相等

原因是下拉滚轮得到的拼接后的数据可能会使页面的高度成为一个小数，而浏览器引擎会将这些数字转化成二进制数，而一些浮点数（即小数）是无法转化成二进制数的，因为它们对于二进制来说就是一个无限循环的浮点数，于是浏览器引擎就会让这个数变成一个有细微偏差值的数，那么无论如何比较这两个值都无法让它们相等，就会出现触发if的判断，也就无法继续下拉

那么无限下拉就这样实现了，很简单吧，有动手的yoyo们也可以去试试喔。