滚动加载数据（懒加载），今天终于去把它实现了

之前在浏览一些网站以及使用一些软件（某云音乐）时，都发现了它们有一个功能，那就是滚动加载数据，比如说滚动加载图片或者评论数据。

秋招面试的时候在说到性能优化的时候也说了懒加载，可面试官进一步问具体怎么实现时，我却沉默了，心想，不就是随着滚动条的滚动加载数据吗？要怎么具体？好吧，我不会（我真是个酸菜鱼）。

秋招结束后一直想找个时间去把代码实现了，可还是太懒了，一直拖。今天需要模仿某云音乐的评论加载功能，便去实现了。

懒加载原理

1. 容器

既然是滚动加载数据，那么我们就需要一个有滚动条的容器，如下代码便创建了一个这样的容器：

<div
    class="commentContainer"
    ref="commentContainer"
  >
 div>

//css
.commentContainer {
	height: 430px;
  	width: 100%;
    overflow-y: auto;
}

上诉容器中当内容超过高度430px时便会在垂直方向上出现滚动条

2. 搞清楚HTML元素的三个属性clientHeight、scrollTop、scrollHeight

clientHeight：元素的可视高度
scrollTop：滚动条的滚动距离，就是滚动条距离容器顶部的距离
scrollHeight：容器实际内容的高度，包括超出视窗的部分

拿上诉div元素来说的，它的clientHeight就是它的高度430px，也就是视窗的高度，这部分高度是我们看得到的，然后当滚动条滚到容器可视高度的最底部时，此时：
scrollTop+clientHeight = scrollHeight

3. 根据条件获取数据

我们判断，当scrollTop+clientHeight = scrollHeight成立时，我们就获取数据，然后push到原数据中

js（vue）代码如下：

 data() {
    return {
      handleComments: [],//要展示的数据
      offset: 0,
      loading: false
    };
  },
  methods: {
  	 scrollGetComment() {
  	 //获取div元素的引用
      let dom = this.$refs.commentContainer;

      const that = this;
      // 监听div元素的滚动事件
      dom.addEventListener("scroll", () => {
        
        const clientHeight = dom.clientHeight;
        const scrollTop = dom.scrollTop;
        const scrollHeight = dom.scrollHeight;
        //条件成立
        if (clientHeight + scrollTop >= scrollHeight) {
          that.offset++;
          const limit = 20;
          that.loading = true;
          
          //获取数据
          getHotComment(that.id, limit, that.offset).then(res =>{           
           //获取到数据后push到原数据后面
            that.handleComments.push(...res.hotComments);
            that.loading = false;
          });
        }
      });
    }
  }