什么是IntersectionObserver

IntersectionObserver是瀏覽器提供的一個API，它可以用來監(jiān)聽元素是否進入了設(shè)備的可視區(qū)域之內(nèi)，而不需要頻繁的計算來做這個判斷。在以前我們常用onscroll跟setTimeOut等對頁面進行監(jiān)聽，缺點是onscroll計算量大會導(dǎo)致性能問題，setTimeOut時間差的問題。因此瀏覽器提供了這個api提供我們使用。

Api介紹

var observer = new IntersectionObserver(callback,options); IntersectionObserver支持兩個參數(shù)：
callback是當被監(jiān)聽元素的可見性變化時，觸發(fā)的回調(diào)函數(shù)
options是一個配置參數(shù)，可選，有默認的屬性值

實現(xiàn)滾動加載

在.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');  // 判斷是否超出可視區(qū)的標志
            if(!blank) return; 
            this.observer = new IntersectionObserver(([entry]) => { //  創(chuàng)建一個IntersectionObserver對象
                if (entry && entry.isIntersecting) {   // 判斷是否進入了可視區(qū)
                    lazyDom.style.display = 'block'; // 進去可視區(qū)以后
                        setTimeout(() => {
                        this.pageNum++;  // 頁數(shù)+1
                          this.getnextPageData(); // 請求下一頁的方法
                    }, 300);
                } else {
                    lazyDom.style.display = 'none';  // 離開可視區(qū)以后
                }
            })
            this.observer.observe(blank);
        },
}]

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

created（）{
this.getnextPageData();
}