Vue 实现下拉加载数据

Vue 实现下拉加载数据

scrollHeight内容总高度
offsetHeight 滚动条滚动的距离
clientHeight当前页面能看到的内容高度

思路：

1. 先获取当前页面中上面的三个值
2. 总高度=滚动条滚动的高度+cliebtHeight（要是想不到底部就加载数据可以写成）
3. offsetHeight +clientHeight>=scrollHeight-n (n是任意数字)

实现代码

 // 为window对象添加一个滚动事件
    window.addEventListener('scroll', () => {
    //  获取clientHeight
      const clientHeight = document.documentElement.clientHeight
      // 获取scrollHeight
      const scrollHeight = document.body.scrollHeight
      // 获取scrollTop  主页兼容问题
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (clientHeight + scrollTop >= scrollHeight - 100) {
     // 写获取内容的代码
        console.log(1)
      }

例如：