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

1、目的

仿掘金官网底部制作无限滚动文章页面

2、原理

1、创建一个IntersectionObserver 对象，用来监听元素实现无限滚动。模拟滚动到最下方时加载新数据

observer: new IntersectionObserver(
        (entries) => {
          if (!this.busy && entries[0].intersectionRatio > 0.75) {
            this.busy = true
            const p = new Promise((resolve, reject) => {
              this.loadMore()
              resolve()
            })
            p.then(() => {
              // 执行异步操作后的内容（目前没有）
            })
          }
        },

2、初始文章信息

3、当加载的文章过多时会有明显卡顿，这种情况下只拿出一部分来渲染

if (this.essays.length <= 24) {
        return this.essays
      }

4、模拟滚动到最下方时加载新数据，监听当前列表的最下部元素，更新后，如果使得文章列表长度发生变化，则重新监听最下方的元素

if (this.$refs.essaylist.childNodes.length != this.curEssaysLength) {
      this.observer.disconnect()
      this.observer.observe(this.$refs.essaylist.lastElementChild)
      this.busy = false
    }

3、效果 基本实现无限滚动页面的功能，但如果列表项中包含图片，并且列表高度由图片撑开。在这种场景下，由于图片会发送网络请求，列表项可能已经渲染到页面中了，但是图片还没有加载出来，此时无法保证我们在获取列表项真实高度时图片是否已经加载完成，获取到的高度有无包含图片高度，从而造成计算不准确的情况。 我们使用懒加载的方式，下拉到底部获取新的内容加载进来，其实就相当于是在垂直方向上的分页叠加功能，但随着加载数据越来越多，浏览器的回流和重绘的开销将会越来越大，整个滑动也会造成卡顿，后期考虑我们考虑使用虚拟列表来解决问题