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

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

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

懒加载原理

  1. 容器

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

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

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

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

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

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

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

  1. 根据条件获取数据

我们判断,当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;
          });
        }
      });
    }
  }
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐