Angular中使用Intersection Observer API實現(xiàn)無限滾動效果

更新時間：2023年12月18日 16:38:33 作者：世界還贊頌沉默嗎

這篇文章主要介紹了Angular中使用Intersection Observer API實現(xiàn)無限滾動,實現(xiàn)原理為在data下面加一個loading元素如果此元素進入視窗則調(diào)用api獲取新的數(shù)據(jù)加到原來的數(shù)據(jù)里面,這時loading就會被新數(shù)據(jù)頂下去,感興趣的朋友一起看看吧

背景：

實現(xiàn)原理為在data下面加一個loading元素如果此元素進入視窗則調(diào)用api獲取新的數(shù)據(jù)加到原來的數(shù)據(jù)里面，這時loading就會被新數(shù)據(jù)頂下去，如此循環(huán)。

<div id="dataContainer"></div>
<div id="loadingContainer"></div>

傳統(tǒng)angular實現(xiàn)是使用ngAfterViewInit()生命周期，寫在指令（Directive）里面，并且傳出一個事件，觸發(fā)時回調(diào)被監(jiān)控組件里面的具體函數(shù)。

不過對于異步操作，元素可能在ngAfterViewInit被調(diào)用時還沒有完成初始化而導致bug，所以用ngAfterViewChecked() 會更穩(wěn)，當然也更會導致性能問題，每次變更檢測它都被調(diào)用，這可能會增加應用程序的負載。

所以這里使用h5 提供的新API ——交叉觀察器 API（Intersection Observer API）提供了一種異步檢測目標元素與祖先元素或頂級文檔的視口相交情況變化的方法。

效果如圖，為了截到loading，我在增加數(shù)據(jù)的函數(shù)里面加了個等待。

上代碼

watch-to-view.directive.ts

import { Directive, Output,EventEmitter, ElementRef } from '@angular/core';
@Directive({
  selector: '[appWatchToView]'
})
export class WatchToViewDirective {
  private observer:IntersectionObserver;
  @Output() appWatchToView = new EventEmitter<IntersectionObserverEntry>();
  constructor(public el:ElementRef) {
    this.observer = new IntersectionObserver(this.callback,{rootMargin:'100px',threshold:1,root:null});
    this.observer.observe(el.nativeElement);
   }
  public callback = (entries: IntersectionObserverEntry[]) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
      if (entry.isIntersecting) {
        this.appWatchToView.emit(entry);
      }
    })
  }
}

app.component.html

<div id="dataContainer">
    <ul>
        <li class="blueBox" *ngFor="let i of data">{{i}}</li>
    </ul>
</div>
<div id="loadingContainer" class="blueBox" appWatchToView (appWatchToView)="this.loadObserver($event)">Loading more...</div>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Herors';
  batch:Number = 10;
  len:Number = this.batch;
  data:Array<Number>=new Array(this.batch).fill(0).map((_,i)=>i);
  loadObserver = async function (event){
    console.log(event.target);
    await new Promise(resolve => setTimeout(resolve, 1000));
    this.data.push(...new Array(this.batch).fill(0).map((_,i)=>i+this.len));
    this.len+=this.batch;
  }
}

再給個樣式吧

  .blueBox{
    display: block;
    width: 100%;
    height: 100px;
    background-color: #38b1ee;
    margin-top: 5px;
    text-align: center;
    color: white;
    font-size: large;
  }