IntersectionObserver 实现滚动加载

什么是IntersectionObserver

IntersectionObserver是浏览器提供的一个API，它可以用来监听元素是否进入了设备的可视区域之内，而不需要频繁的计算来做这个判断。在以前我们常用onscroll跟setTimeOut等对页面进行监听，缺点是onscroll计算量大会导致性能问题，setTimeOut时间差的问题。因此浏览器提供了这个api提供我们使用。

Api介绍

var observer = new IntersectionObserver(callback,options); IntersectionObserver支持两个参数：
callback是当被监听元素的可见性变化时，触发的回调函数
options是一个配置参数，可选，有默认的属性值

实现滚动加载

在.vue文件中

<templete>
<div class="card-list" ref="obtain">
                <div v-for="(item, index) in cardList" :key="index" :oItem="item" :oIndex="index" ></div>
                <p class="blank" ></p>
                <p class="lazy"></p>
            </div>
</templete>

data() {
 cardList: []
},
methods:{
scrollPageList() {
            const blank = document.querySelector('.blank');  // 判断是否存在判断是佛到底部的标志
            const lazyDom = document.querySelector('.lazy');  // 判断是否超出可视区的标志
            if(!blank) return; 
            this.observer = new IntersectionObserver(([entry]) => { //  创建一个IntersectionObserver对象
                if (entry && entry.isIntersecting) {   // 判断是否进入了可视区
                    lazyDom.style.display = 'block'; // 进去可视区以后
                        setTimeout(() => {
                        this.pageNum++;  // 页数+1
                          this.getnextPageData(); // 请求下一页的方法
                    }, 300);
                } else {
                    lazyDom.style.display = 'none';  // 离开可视区以后
                }
            })
            this.observer.observe(blank);
        },
}]

在created生命周期中进行初始化

created（）{
this.getnextPageData();
}